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

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?

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

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.

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

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

noch einer:

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

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

                return false;
}