Wie kann ich die Formularübermittlung beim Klicken auf die Schaltfläche "Senden" abbrechen?

99

Ich arbeite an einer ASP.net-Webanwendung.

Ich habe ein Formular mit einem Senden-Button. Der Code für die Schaltfläche "Senden" sieht folgendermaßen aus <input type='submit' value='submit request' onclick='btnClick();'>.

Ich möchte so etwas wie folgendes schreiben:

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

Wie mache ich das?

Vivian River
quelle
Autsch, das macht meinen Kopf weh. Ich habe verschiedene submitEingänge. Ich denke, ich werde versuchen, serverseitige Steuerelemente auf dieser Seite zu verwenden.
Vivian River

Antworten:

182

Du bist besser dran ...

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

Wenn Sie isValidForm()zurückkehren false, wird Ihr Formular nicht gesendet.

Sie sollten Ihren Event-Handler wahrscheinlich auch von Inline verschieben.

document.getElementById('my-form').onsubmit = function() {
    return isValidForm();
};
Alex
quelle
Schön, aber es scheint, dass ich nicht onsubmitzur Arbeit kommen kann, wenn ich ASP.net benutze, weil asp.net ALLES in seiner eigenen Form verpackt ...
Vivian River
5
Sie können seinen zweiten Vorschlag verwenden. Inline-Javascript ist sowieso der Teufel.
Stephen
3
Wenn Sie ASP.NET-Webformulare verwenden (Hinweis: nicht), versuchen Sie nicht, andere Formulare einzuschließen. Sie sind einfach nicht kompatibel. Ich habe gehört, dass Sie mit ASP.NET MVC Web-Apps mit idiomatischem Markup erstellen können.
Quentin
@David, wenn die Verwendung anderer Formulare nicht mit ASP.net-Webformularen kompatibel ist, sollte ich dann nur serverseitige Steuerelemente verwenden?
Vivian River
2
Jemand anderes hat genau so geantwortet wie Sie stackoverflow.com/a/23604664/1639385 . Ich denke, es war zu viel Zufall.
Ulysses Alves
43

Ändern Sie Ihre Eingabe in Folgendes:

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

Und geben Sie in Ihrer Funktion false zurück

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

Du musst dich ändern

onclick='btnClick();'

zu

onclick='return btnClick();'

und

cancelFormSubmission();

zu

return false;

Trotzdem würde ich versuchen, die intrinsischen Ereignisattribute zugunsten von unauffälligem JS mit einer Bibliothek (wie YUI oder jQuery) zu vermeiden, die über eine gute API zur Ereignisbehandlung verfügt und mit dem Ereignis verknüpft ist, das wirklich wichtig ist (dh stattdessen das Übermittlungsereignis des Formulars) des Klickereignisses der Schaltfläche).

QUentin
quelle
2
Mit onclick kann der Benutzer die Eingabetaste drücken und die Prüfung umgehen.
Cfreak
7

Manchmal onsubmitwürde mit asp.net nicht funktionieren.

Ich habe es auf sehr einfache Weise gelöst.

wenn wir eine solche Form haben

<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>

Sie können dieses Ereignis jetzt vor dem Formular-Postback abrufen, das Postback stoppen und mit dieser Abfrage den gewünschten Ajax ausführen.

$(document).ready(function () {
            $("#login-btn").click(function (event) {
                event.preventDefault();
                alert("do what ever you want");
            });
 });
Schattiger Sherif
quelle
5

Sie sollten den Typ von ändern submitin button:

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

anstatt

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

Sie erhalten dann den Namen Ihrer Schaltfläche in Javascript und ordnen ihr die gewünschte Aktion zu

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

arbeitete für mich hoffe es hilft.

Mohammed
quelle
4

Sie müssen return false;:

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

function btnClick() {
    return validData();
}
SLaks
quelle
1

Warum ändern Sie nicht die Schaltfläche "Senden" in eine normale Schaltfläche und senden Sie beim Klickereignis Ihr Formular, wenn es Ihre Validierungstests besteht?

z.B

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

function btnClick() { 
    if (validData()) 
        document.myform.submit();
} 
George Johnston
quelle
1
Wenn Sie die Eingabetaste drücken, wird die Prüfung umgangen. Verwenden Sie onSubmit
Cfreak
Dann funktioniert es überhaupt nicht, wenn JavaScript nicht verfügbar ist. <a href=" icant.co.uk/articles/pragmatic-progressive-enhancement/… über Dinge, die funktionieren</a>.
Quentin
1

Du brauchst onSubmit. Nicht onClickanders kann jemand nur drücken Sie die Eingabetaste , und es wird die Validierung umgehen. Wie zum Stornieren. Sie müssen false zurückgeben. Hier ist der Code:

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

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

Bearbeiten onSubmit gehört in das Formular-Tag.

Cfreak
quelle
das wird nicht funktionieren. Wenn die Daten gültig sind, geben Sie nicht true zurück. setze return true; am Ende der Funktion btnClick ()
NickSoft
1

Es ist einfach, geben Sie einfach false zurück.

Der folgende Code befindet sich innerhalb des Klicks auf die Schaltfläche "Senden" mit jquery.

if(conditionsNotmet)
{
return false;
}
omar-ali
quelle
0

verwenden onclick='return btnClick();'

und

function btnClick() {
    return validData();
}
Adam
quelle
2
Wenn Sie die Eingabetaste drücken, wird die Prüfung umgangen. Verwenden Sie onSubmit
Cfreak
0
function btnClick() {
    return validData();
}
mbeckish
quelle
1
Es ist notwendig, mehr als dies zu tun, damit es funktioniert. Ich habe versucht, die Funktion wahr oder falsch zurückzubringen, und es scheint keinen Unterschied zu machen.
Vivian River
1
Seine Antwort ist richtig. Upvoted. Sie müssen es auch im Eingabe-Tag zurückgeben
Cfreak
1
Außerdem möchte ich lieber das Standardverhalten verwenden ev.preventDefault()oder ev.returnValue = falseabbrechen, aber das Sprudeln von Ereignissen nicht verhindern, falls andere Steuerelemente dasselbe Ereignis auf demselben Element beobachten. Verwenden Sie return falsenur , wenn Sie das Ereignis beenden möchten aus sprudelnden und brechen Sie die Standardaktion. Siehe diesen Artikel .
Klemen Slavič
Die Rückgabe im Event-Handler selbst ist die wichtigste Information, die in der Antwort fehlte. Ohne das ist die Antwort unvollständig und hilft nicht genug, um eine Gegenstimme wert zu sein.
Quentin
0
<input type='button' onclick='buttonClick()' />

<script>
function buttonClick(){
    //Validate Here
    document.getElementsByTagName('form')[0].submit();
}
</script>
Person
quelle
2
Für eine nützliche Antwort muss diese Reaktion erweitert werden. Erklären Sie, warum dies eine Antwort auf die Frage ist.
Jeroen Heier
0

Mit JQuery ist es noch einfacher: Funktioniert in Asp.Net MVC und Asp.Core

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

        if (ValidData) {
            return true;   //submit the form
        }
        else {
            return false;  //cancel the submit
        }
    });
</script>
Tidoy007
quelle