it-swarm.com.de

Wie storniere ich die Formularübergabe beim Senden-Button-Klick-Ereignis?

Ich arbeite an einer ASP.net-Webanwendung.

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

Ich möchte etwas wie das Folgende schreiben:

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

Wie mache ich das?

92

Du bist besser dran zu tun ...

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

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

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

document.getElementById('my-form').onsubmit = function() {
    return isValidForm();
};
163
alex

Ändern Sie Ihre Eingabe dazu:

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

Und kehren Sie in Ihrer Funktion zurück

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

Du musst dich ändern

onclick='btnClick();'

zu

onclick='return btnClick();'

und

cancelFormSubmission();

zu

return false;

Das heißt, ich würde versuchen, die intrinsischen Ereignisattribute zugunsten von unauffälliger JS mit einer Bibliothek (wie YUI oder jQuery) zu vermeiden, die über eine gute Ereignisbehandlungs-API verfügt und sich in das Ereignis einfügt, das wirklich wichtig ist Formular zum Senden des Ereignisses anstelle des Klickereignisses der Schaltfläche).

12
Quentin

sie sollten den Typ von submit in button ändern:

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

anstatt

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

sie erhalten dann den Namen Ihres Buttons in Javascript und ordnen der Aktion die gewünschten Aktionen zu

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

arbeitete für mich .__hoffentlich hilft es.

5
Mohammed

Manchmal funktioniert onsubmit nicht mit asp.net.

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 Post-Postback abrufen und das Postback abbrechen und alle gewünschten Ajax-Vorgänge mit dieser Jquery ausführen.

$(document).ready(function () {
            $("#login-btn").click(function (event) {
                event.preventDefault();
                alert("do what ever you want");
            });
 });
4
shady sherif

Sie müssen return false;:

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

function btnClick() {
    return validData();
}
3
SLaks

Es ist einfach, nur falsch zurückzugeben.

Der nachfolgende Code wird mit dem Befehl jquery in den OnClick des Submit-Buttons übernommen.

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

Warum ändern Sie nicht die Schaltfläche "Senden" in eine reguläre Schaltfläche und senden das Formular beim Klickereignis ab, wenn Ihre Validierungstests bestanden sind.

z.B

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

function btnClick() { 
    if (validData()) 
        document.myform.submit();
} 
1
George Johnston

benutze onclick='return btnClick();'

und

function btnClick() {
    return validData();
}
0
Adam
function btnClick() {
    return validData();
}
0
mbeckish

Sie benötigen onSubmit. Nicht onClick. Andernfalls kann jemand einfach die Eingabetaste drücken und die Überprüfung wird umgangen. Wie für die Stornierung. Sie müssen falsch zurückkehren. Hier ist der Code:

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

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

Edit onSubmit gehört in das Form-Tag.

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

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