Kann ich eine <Schaltfläche> dazu bringen, ein Formular nicht abzuschicken?

Question

Ich habe ein Formular mit 2 Schaltflächen

<a href="index.html"><button>Cancel changes</button></a>

<button type="submit">Submit</button>

Ich verwende die jQuery UI-Schaltfläche auch auf ihnen, einfach wie folgt

$('button').button();

Mit der ersten Schaltfläche wird das Formular jedoch auch abgeschickt. Ich hätte gedacht, dass, wenn es nicht die type="submit" würde es nicht.

Offensichtlich könnte ich das tun

$('button[type!=submit]').click(function(event) { event.stopPropagation(); });

Aber gibt es eine Möglichkeit, wie ich verhindern kann, dass die Schaltfläche "Zurück" das Formular ohne JavaScript-Eingriff sendet?

Um ehrlich zu sein, habe ich eine Schaltfläche nur verwendet, damit ich sie mit jQuery UI gestalten kann. Ich habe versucht, aufzurufen button() auf den Link und es funktionierte nicht wie erwartet (sah ziemlich hässlich aus!).

Answer 1

Der Standardwert für die type Attribut von button Elemente es "abschicken". Setzen Sie ihn auf type="button" um eine Schaltfläche zu erzeugen, die das Formular nicht abschickt.

<button type="button">Submit</button>

Mit den Worten des HTML-Standard : "Macht nichts."

Answer 2

El button エレメント hat einen Standardtyp von submit .

Sie können die Funktion deaktivieren, indem Sie einen Typ von button :

<button type="button">Cancel changes</button>

Answer 3

Verwenden Sie einfach das gute alte HTML:

<input type="button" value="Submit" />

Verpacken Sie es als Betreff eines Links, wenn Sie dies wünschen:

<a href="http://somewhere.com"><input type="button" value="Submit" /></a>

Oder wenn Sie entscheiden, dass Sie Javascript für eine andere Funktionalität benötigen:

<input type="button" value="Cancel" onclick="javascript: someFunctionThatCouldIncludeRedirect();"/>

Answer 4

Ja, Sie können eine Schaltfläche dazu bringen, ein Formular nicht abzuschicken, indem Sie ein Attribut vom Typ Wert Schaltfläche hinzufügen:

<button type="button"><button>

Answer 5

<form onsubmit="return false;">
   ...
</form>