web-dev-qa-db-de.com

HTML-Schaltfläche, um das Formular NICHT zu übermitteln

Ich habe eine Form. Außerhalb dieses Formulars habe ich einen Button. Ein einfacher Button wie dieser:

<button>My Button</button>

Wenn ich es jedoch anklicke, wird das Formular gesendet. Hier ist der Code:

<form id="myform">
    <input />
</form>
<button>My Button</button>

Alles, was dieser Button benötigt, ist JavaScript. Aber selbst wenn es genau wie im obigen Code aussieht, wird das Formular gesendet. Wenn ich die Tag-Schaltfläche in span umstelle, funktioniert sie perfekt. Leider muss es sich um einen Button handeln. Gibt es eine Möglichkeit, diese Schaltfläche vom Senden des Formulars abzuhalten? Wie e. G.

<button onclick="document.getElementById('myform').doNotSubmit();">My Button</button>
javascripthtml
314
arik

Ich denke, das ist die ärgerlichste kleine Besonderheit von HTML ... Diese Schaltfläche muss vom Typ "Schaltfläche" sein, um nicht zu übergeben. 

<button type="button">My Button</button>

Update 5-Feb-2019: Laut HTML Living Standard (und auch HTML 5-Spezifikation ):

Die Standardwert für fehlende Werte und Standardwert für ungültige Werte sind die Submit Zustand der Schaltfläche.

775
Dave Markle

return false; am Ende des onclick-Handlers erledigt den Job. Es ist jedoch besser, type="button" einfach zu <button> hinzuzufügen - so verhält es sich auch ohne JavaScript richtig.

33
ThiefMaster

Dave Markle hat recht. Von W3Schools Website :

Geben Sie immer das Typattribut für .__ an. die Taste. Der Standardtyp für Internet Explorer ist "button", während In anderen Browsern (und in der W3C Spezifikation) ist es "Submit".

Mit anderen Worten, der von Ihnen verwendete Browser entspricht den W3C-Spezifikationen.

14
Gert Grenander

Standardmäßig senden HTML-Schaltflächen ein Formular.

Dies ist darauf zurückzuführen, dass auch außerhalb des Formulars befindliche Schaltflächen als Absender fungieren (siehe Website von W3Schools: http://www.w3schools.com/tags/att_button_form.asp )

Mit anderen Worten, der Schaltflächentyp ist standardmäßig "Senden"

<button type="submit">Button Text</button>

Um dies zu umgehen, verwenden Sie einfach die Taste .

<button type="button">Button Text</button>

Andere Optionen umfassen die Rückgabe von false am Ende von onclick oder eines anderen Handlers für das Klicken auf die Schaltfläche oder die Verwendung eines <input> -Tags 

Weitere Informationen finden Sie in den Informationen des Mozilla Developer Network zu Schaltflächen: https://developer.mozilla.org/de/docs/Web/HTML/Element/button

10
GJZ

Es wird empfohlen, das <Button>-Tag nicht zu verwenden. Verwenden Sie stattdessen den Tag <Input type='Button' onclick='return false;'>. (Mit dem "return false" sollte das Formular in der Tat nicht gesendet werden.)

Einige Referenzmaterialien

3
Tim

Aus Gründen der Barrierefreiheit konnte ich es nicht mit mehreren type=submit-Tasten abziehen. Die einzige Möglichkeit, nativ mit einer form mit mehreren Tasten zu arbeiten, aberONLYone kann das Formular absenden, wenn Sie die Enter-Taste drücken, indem Sie sicherstellen, dass nur einer von ihnen type=submit ist, während sich andere in einem anderen Typ befinden, beispielsweise type=button. . Auf diese Weise können Sie von der besseren Benutzererfahrung im Umgang mit einem Formular in einem Browser hinsichtlich der Tastaturunterstützung profitieren.

0
motss