HTML-Schaltfläche zum NICHT Senden eines Formulars

370

Ich habe ein Formular. Außerhalb dieses Formulars habe ich einen Knopf. Ein einfacher Knopf wie dieser:

<button>My Button</button>

Wenn ich jedoch darauf klicke, wird das Formular gesendet. Hier ist der Code:

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

Diese Schaltfläche sollte lediglich JavaScript enthalten. Aber selbst wenn es genau wie im obigen Code aussieht, sendet es das Formular. Wenn ich die Tag-Schaltfläche in "Span" ändere, funktioniert sie einwandfrei. Aber leider muss es ein Knopf sein. Gibt es eine Möglichkeit, das Senden des Formulars durch diese Schaltfläche zu blockieren? Wie z

<button onclick="document.getElementById('myform').doNotSubmit();">My Button</button>
javascript html arik
quelle
3
Dieses Problem ist in modernen Browsern nicht reproduzierbar, und das Problem ist möglicherweise ursprünglich auf ein Missverständnis zurückzuführen. Während der Standardwert für buttonist type=submit, muss kein Formular gesendet werden, wenn sich das buttonElement außerhalb eines Formulars befindet. Sofern keine tatsächliche Demonstration (ein Beispieldokument, Identifizierung eines Browsers und Beschreibung von Beobachtungen, die zeigen, dass ein Formular eingereicht wurde) gegeben werden kann, sollte diese Frage als nicht reproduzierbar geschlossen werden. Die Verwendung type=buttonist eine gute Praxis, aber dies macht das Problem nicht real.
Jukka K. Korpela

Antworten:

894

Ich denke, dies ist die nervigste kleine Besonderheit von HTML ... Diese Schaltfläche muss vom Typ "Schaltfläche" sein, um nicht gesendet zu werden. 

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

Update 5-Feb-2019: Gemäß HTML Living Standard (und auch HTML 5-Spezifikation ):

Der Standardwert für fehlende Werte und der Standardwert für ungültige Werte sind der Status der Schaltfläche "Senden".

Dave Markle
quelle
9
@ Powerslave keinen Grund, nichtto use <button>
Sandip Pingle
4
@SandipPingle Es gibt keinen Grund, es zu verwenden, es sei denn, Sie benötigen eine wirklich komplexe Art von Styling. Außerdem werden IE6 und IE7 (zum Glück auslaufen) <button>in einigen Fällen falsch behandelt. Darüber hinaus <button>ist es nicht 100% browserübergreifend kompatibel, da verschiedene Browser möglicherweise unterschiedliche Werte für dasselbe senden, <button>wenn sie in einem Formular verwendet werden.
Powerslave
35
Dies ist eine großartige Antwort, aber keine Besonderheit . Der Standardwert des typeAttributs in einem <button>Tag ist submit. Wenn geändert type=button, das <button>ist kein Standardverhalten gegeben. Siehe typeAttribut hier: developer.mozilla.org/en-US/docs/Web/HTML/Element/button
Michael Benjamin
1
Also, was ist die Idee von <button type='submit'>Das ist zu schwierig für mich, haha. Wie auch immer, deine Antwort funktioniert großartig!
divHelper11
2
Das Standardverhalten (und damit das implizite Verhalten) eines nicht formularspezifischen Elements besteht darin, potenziell zerstörerische formularspezifische Funktionen auszulösen. Wie ist das nicht eine eigenartige Designentscheidung für die HTML-Spezifikation?
HonoredMule
36

return false;Am Ende erledigt der Onclick-Handler die Arbeit. Allerdings ist es besser, fügen Sie einfach type="button"auf die <button>- auf diese Weise es richtig auch ohne JavaScript verhält.

DiebMaster
quelle
1
Schaltflächen, die keine Formulare senden, sind ohnehin nur bei aktiviertem JavaScript nützlich ... Ich stimme zu, dass type = "button" sauberer ist.
ThiefMaster
2
return false;funktioniert nicht in allen Szenarien, während type="Button". Auch mit aktiviertem JavaScript.
Brejoc
15

Dave Markle ist richtig. Von der Website von W3School :

Geben Sie immer das Typattribut für die Schaltfläche an. Der Standardtyp für Internet Explorer ist "button", während er in anderen Browsern (und in der W3C-Spezifikation) "submit" ist.

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

Gert Grenander
quelle
15

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

Dies liegt an der Tatsache, dass auch Schaltflächen außerhalb eines Formulars als Übermittler fungieren (siehe die W3Schools-Website: 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>

Ein einfacher Weg, dies zu umgehen, ist daher die Verwendung des Schaltflächentyps .

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

Weitere Optionen sind die Rückgabe von false am Ende des Onclicks oder eines anderen Handlers, wenn auf die Schaltfläche geklickt wird, oder die Verwendung eines <eingabe> -Tags

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

GJZ
quelle
3

Es wird empfohlen, das <Button>Tag nicht zu verwenden . Verwenden Sie <Input type='Button' onclick='return false;'>stattdessen das Tag. (Die Verwendung von "return false" sollte das Formular in der Tat nicht senden.)

Einige Referenzmaterialien

Tim
quelle
2
Es reicht aus, um <input type="button" />es zu verwenden , und es reicht aus return false;, um beides zu tun.
Tom
Ich bin nicht damit einverstanden, dass empfohlen wird, das Button-Tag nicht zu verwenden. Wenn Sie es nicht verwenden, verlieren Sie einige Eingabehilfen, die Sie automatisch mit dem Schaltflächen-Tag erhalten würden. Ich würde sagen, dass das Schaltflächen-Tag tatsächlich für Elemente empfohlen wird, die als Schaltflächen fungieren.
CookieMonster
Laut dem Hinweis im Referenzmaterial, den Sie verlinkt haben: "Während <input> -Elemente vom Typ button noch einwandfrei gültiges HTML sind, ist das neuere <button> -Element jetzt die bevorzugte Methode zum Erstellen von Schaltflächen." Es ist also genau das Gegenteil, das Sie angegeben haben.
jedzej
1

Aus Gründen der Barrierefreiheit konnte ich es nicht mit mehreren type=submitTasten abziehen . Die einzige Möglichkeit, nativ mit einem formmit mehreren Schaltflächen zu arbeiten, aber NUR man kann das Formular senden, wenn man die EnterTaste drückt, besteht darin, sicherzustellen, dass nur eine davon vorhanden ist, type=submitwährend andere in einem anderen Typ wie z type=button. Auf diese Weise können Sie von der besseren Benutzererfahrung beim Umgang mit einem Formular in einem Browser hinsichtlich der Tastaturunterstützung profitieren.

motss
quelle
0

Eine andere Option, die für mich funktioniert hat, war das Hinzufügen von onsubmit = "return false;" zum Formular-Tag.

<form onsubmit="return false;">

Semantisch wahrscheinlich keine so gute Lösung wie die oben genannten Methoden zum Ändern des Schaltflächentyps, scheint jedoch eine Option zu sein, wenn Sie nur ein Formularelement möchten, das nicht gesendet wird.

kk64738
quelle