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

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?

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();
};

Ä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;
}

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

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");
            });
 });

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.

Sie müssen return false;:

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

function btnClick() {
    return validData();
}

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();
} 

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.

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

verwenden onclick='return btnClick();'

und

function btnClick() {
    return validData();
}

function btnClick() {
    return validData();
}

<input type='button' onclick='buttonClick()' />

<script>
function buttonClick(){
    //Validate Here
    document.getElementsByTagName('form')[0].submit();
}
</script>

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>