Jak anulować przesyłanie formularza za pomocą przycisku przesyłania wydarzenia onclick?

99

Pracuję nad aplikacją internetową ASP.net.

Mam formularz z przyciskiem przesyłania. Wygląda jak kod przycisku przesyłania <input type='submit' value='submit request' onclick='btnClick();'>.

Chcę napisać coś takiego:

function btnClick() {
    if (!validData())
        cancelFormSubmission();
}

Jak mam to zrobic?

Rzeka Vivian
źródło
ouch, boli mnie głowa. Mam kilka różnych submitwejść. Myślę, że spróbuję użyć kontrolek po stronie serwera na tej stronie.
Vivian River

Odpowiedzi:

183

Lepiej zrobisz ...

<form onsubmit="return isValidForm()" />

Jeśli isValidForm()wróci false, Twój formularz nie zostanie przesłany.

Prawdopodobnie powinieneś także przenieść program obsługi zdarzeń z inline.

document.getElementById('my-form').onsubmit = function() {
    return isValidForm();
};
Alex
źródło
Ładne, ale wydaje się, że nie mogę dostać się onsubmitdo pracy, gdy Używam ASP.net ponieważ asp.net owija wszystko w nim własny formularz ...
Vivian rzeki
5
Możesz skorzystać z jego drugiej sugestii. Inline javascript i tak jest diabłem.
Stephen
3
Jeśli używasz formularzy internetowych ASP.NET (wskazówka: nie), nie próbuj uwzględniać innych formularzy. Są po prostu niekompatybilne. Słyszałem, że ASP.NET MVC umożliwia tworzenie aplikacji internetowych przy użyciu idiomatycznych znaczników.
Quentin
@David, jeśli używanie innych formularzy jest niezgodne z formularzami internetowymi ASP.net, to czy powinienem używać tylko formantów po stronie serwera?
Vivian River
2
Ktoś inny odpowiedział DOKŁADNIE tak, jak ty stackoverflow.com/a/23604664/1639385 . Myślę, że to był zbyt duży zbieg okoliczności.
Ulysses Alves
43

Zmień swój wpis na ten:

<input type='submit' value='submit request' onclick='return btnClick();'>

I zwróć false w swojej funkcji

function btnClick() {
    if (!validData())
        return false;
}
mikefrey
źródło
13

Musisz się zmienić

onclick='btnClick();'

do

onclick='return btnClick();'

i

cancelFormSubmission();

do

return false;

To powiedziawszy, spróbuję uniknąć wewnętrznych atrybutów zdarzeń na rzecz dyskretnego JS z biblioteką (taką jak YUI lub jQuery), która ma dobry interfejs API do obsługi zdarzeń i powiązać ze zdarzeniem, które naprawdę ma znaczenie (tj. Zamiast tego zdarzenie przesyłania formularza zdarzenia kliknięcia przycisku).

Quentin
źródło
2
Użycie onclick pozwoli użytkownikowi na wciśnięcie enter i ominięcie czeku.
Cfreak
7

Czasami onsubmitnie działa z asp.net.

Rozwiązałem to w bardzo łatwy sposób.

jeśli mamy taką formę

<form method="post" name="setting-form" >
   <input type="text" id="UserName" name="UserName" value="" 
      placeholder="user name" >
   <input type="password" id="Password" name="password" value="" placeholder="password" >
   <div id="remember" class="checkbox">
    <label>remember me</label>
    <asp:CheckBox ID="RememberMe" runat="server" />
   </div>
   <input type="submit" value="login" id="login-btn"/>
</form>

Możesz teraz złapać get to zdarzenie przed postbackiem formularza i zatrzymać je przed postbackiem i wykonać wszystkie operacje AJAX, które chcesz, używając tego jquery.

$(document).ready(function () {
            $("#login-btn").click(function (event) {
                event.preventDefault();
                alert("do what ever you want");
            });
 });
Shady Sherif
źródło
5

należy zmienić typ z submitna button:

<input type='button' value='submit request'>

zamiast

<input type='submit' value='submit request'>

następnie otrzymujesz nazwę swojego przycisku w javascript i kojarzysz z nim dowolne działanie

var btn = document.forms["frm_name"].elements["btn_name"];
btn.onclick = function(){...};

pracował dla mnie, mam nadzieję, że to pomaga.

Mohammed
źródło
4

Musisz return false;:

<input type='submit' value='submit request' onclick='return btnClick();' />

function btnClick() {
    return validData();
}
SLaks
źródło
1

Dlaczego nie zmienić przycisku przesyłania na zwykły, a w przypadku kliknięcia prześlij formularz, jeśli przejdzie testy walidacyjne?

na przykład

<input type='button' value='submit request' onclick='btnClick();'>

function btnClick() { 
    if (validData()) 
        document.myform.submit();
} 
George Johnston
źródło
1
Wciśnięcie Enter omija czek. Użyj onSubmit
Cfreak
Wtedy to w ogóle nie zadziała, jeśli JavaScript nie jest dostępny. <a href=" icant.co.uk/articles/pragmatic-progressive-enhancement/… o rzeczach, które działają</a>.
Quentin,
1

Potrzebujesz onSubmit. W onClickprzeciwnym razie ktoś może po prostu nacisnąć enter i ominie twoją weryfikację. Co do anulowania. musisz zwrócić fałsz. Oto kod:

<form onSubmit="return btnClick()">
<input type='submit' value='submit request'>

function btnClick() {
    if (!validData()) return false;
}

Edit onSubmit należy do tagu formularza.

Cfreak
źródło
to nie zadziała. jeśli dane są prawidłowe, nie zwracasz prawdy. put return true; na końcu funkcji btnClick ()
NickSoft,
1

To proste, po prostu zwróć fałsz;

Poniższy kod pojawia się po kliknięciu przycisku przesyłania za pomocą jquery.

if(conditionsNotmet)
{
return false;
}
omar-ali
źródło
0

posługiwać się onclick='return btnClick();'

i

function btnClick() {
    return validData();
}
Adam
źródło
2
naciśnięcie Enter spowoduje ominięcie czeku. Użyj onSubmit
Cfreak
0
function btnClick() {
    return validData();
}
mbeckish
źródło
1
Aby to zadziałało, trzeba zrobić coś więcej. Próbowałem, aby funkcja functino zwracała wartość true lub false i nie wydaje się to robić żadnej różnicy.
Vivian River
1
Jego odpowiedź jest poprawna. Głosowano za. Musisz go również zwrócić w tagu wejściowym
Cfreak
1
Ponadto wolałbym użyć ev.preventDefault()lub ev.returnValue = falseanulować domyślne zachowanie, ale nie zapobiegać propagacji zdarzeń, na wypadek gdyby inne kontrolki obserwowały to samo zdarzenie w tym samym elemencie. Używaj return falsetylko wtedy, gdy chcesz zatrzymać propagację zdarzenia i anulować domyślną akcję. Zobacz ten artykuł .
Klemen Slavič
Konieczność zwrócenia go w samym programie obsługi zdarzeń jest bardzo ważną informacją, której brakowało w odpowiedzi. Bez tego odpowiedź jest niekompletna i nie pomaga na tyle, aby być wartym uznania.
Quentin
0
<input type='button' onclick='buttonClick()' />

<script>
function buttonClick(){
    //Validate Here
    document.getElementsByTagName('form')[0].submit();
}
</script>
Osoba
źródło
2
Aby uzyskać użyteczną odpowiedź, tę reakcję należy rozszerzyć. Wyjaśnij, dlaczego jest to odpowiedź na pytanie.
Jeroen Heier
0

Z JQuery jest jeszcze prostsze: działa w Asp.Net MVC i Asp.Core

<script>
    $('#btnSubmit').on('click', function () {

        if (ValidData) {
            return true;   //submit the form
        }
        else {
            return false;  //cancel the submit
        }
    });
</script>
Tidoy007
źródło