Deaktivieren Sie das automatische Senden des Formulars beim Klicken auf die Schaltfläche


180

Ich habe ein HTML-Formular, in dem ich mehrere Schaltflächen verwende. Das Problem ist, dass unabhängig davon, auf welche Schaltfläche ich klicke, das Formular gesendet wird, auch wenn die Schaltfläche nicht vom Typ "Senden" ist. zB Buttons wie : <button>Click to do something</button>, führen zur Formularübermittlung.

Es ist ziemlich schmerzhaft, e.preventDefault()für jede dieser Tasten eine zu machen.

Ich benutze jQuery und jQuery UI und die Website ist in HTML5.

Gibt es eine Möglichkeit, dieses automatische Verhalten zu deaktivieren?

Antworten:


457

Schaltflächen wie "Senden" <button>Click to do something</button> sind Schaltflächen.

Stellen Sie ein type="button", um das zu ändern. type="submit"ist die Standardeinstellung (wie in der HTML-Empfehlung angegeben ).


24
Ich habe einen Tag Schlaf verloren und meinen Code vergeblich repariert, weil ich diese einfache Spezifikation nicht kannte!
Palerdot

4
Ich bin froh, dass ich diese Notiz nach einer schnellen Google-Suche gefunden und keine Stunden getötet habe. Sehr wissen, vielen Dank.
Brooklynsweb

2
@NiketJoshi - Diese Aussage scheint nichts mit der Frage zu tun zu haben, die diese Antwort beantwortet. Wenn Sie eine neue Frage haben, stellen Sie eine , stellen Sie jedoch sicher, dass Sie eine klare Problemstellung und ein minimal reproduzierbares Beispiel angeben .
Quentin

19

Sie können einfach versuchen, return false zu verwenden (return false überschreibt das Standardverhalten für jedes DOM-Element) wie folgt:

myform.onsubmit = function ()
{ 
  // do what you want
  return false
}

und senden Sie dann Ihr Formular mit myform.submit ()

oder alternativ :

mybutton.onclick = function () 
{
   // do what you want
   return false
}

Auch wenn Sie type="button"Ihr Formular verwenden, wird es nicht gesendet.


8

<button>sind in der Tat Submit-Buttons, sie haben keine andere Hauptfunktionalität. Sie müssen den Typ auf die Schaltfläche setzen.
Wenn Sie Ihren Event-Handler jedoch wie unten beschrieben binden, zielen Sie auf alle Schaltflächen ab und müssen dies nicht für jede Schaltfläche manuell tun!

$('form button').on("click",function(e){
    e.preventDefault();
});

Es ist e.preventDefault();.
hlcs

0

Wenn Sie die Eingabe direkt als Attribut hinzufügen möchten, verwenden Sie diese Option

 onclick="return false;" 

<input id = "btnPlay" type="button" onclick="return false;" value="play" /> 

Dadurch wird das Verhalten beim Senden von Formularen verhindert


0

noch einer:

if(this.checkValidity() == false) {

                $(this).addClass('was-validated');
                e.preventDefault();
                e.stopPropagation();
                e.stopImmediatePropagation();

                return false;
}
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.