wake-up-neo.com

Kann ich mit einem <button> kein Formular senden?

Ich habe ein Formular mit 2 Knöpfen

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

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

Ich benutze auch die Schaltfläche von jQuery UI, einfach so

$('button').button();

Über die erste Schaltfläche wird jedoch auch das Formular gesendet. Ich hätte gedacht, dass wenn es nicht den type="submit" hätte, würde es nicht.

Natürlich könnte ich das tun

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

Aber kann ich verhindern, dass der Zurück-Button das Formular ohne JavaScript-Intervention absendet?

Um ehrlich zu sein, habe ich eine Schaltfläche nur verwendet, um sie mit der jQuery-Benutzeroberfläche zu gestalten. Ich habe versucht, button() für den Link aufzurufen, und es hat nicht wie erwartet funktioniert (sah ziemlich hässlich aus!).

javascriptjqueryhtmljquery-uibutton
461
alex

Der Standardwert für das Attribut type von button Elementen ist "submit". Setzen Sie es auf type="button", um eine Schaltfläche zu erstellen, die das Formular nicht sendet.

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

In den Worten des HTML Standard : "Tut nichts."

1001
Josh Lee

Das button -Element hat den Standardtyp submit.

Sie können nichts tun, indem Sie den Typ button festlegen:

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

Benutze einfach gutes altes HTML:

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

Schließen Sie es als Betreff eines Links ein, wenn Sie dies wünschen:

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

Oder wenn Sie entscheiden, dass JavaScript eine andere Funktionalität bereitstellen soll:

<input type="button" value="Cancel" onclick="javascript: someFunctionThatCouldIncludeRedirect();"/>
17
Jeffrey Blake
<form onsubmit="return false;">
   ...
</form>
6
zzjove

Ehrlich gesagt, ich mag die anderen Antworten. Einfach und ohne in JS einzusteigen. Aber mir ist aufgefallen, dass Sie nach jQuery gefragt haben. Wenn Sie in jQuery der Vollständigkeit halber mit dem Handler .click () false zurückgeben, wird die Standardaktion des Widgets negiert.

Siehe hier für ein Beispiel (und noch mehr Goodies). Hier ist auch die Dokumentation .

kurz gesagt, machen Sie mit Ihrem Beispielcode Folgendes:

<script type="text/javascript">
    $('button[type!=submit]').click(function(){
        // code to cancel changes
        return false;
    });
</script>

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

Als zusätzlichen Vorteil können Sie damit das Anker-Tag entfernen und einfach die Schaltfläche verwenden.

5
TCCV

Ohne das type Attribut zu setzen, können Sie auch false von Ihrem OnClick Handler zurückgeben und das onclick Attribut als onclick="return onBtnClick(event)" deklarieren.

0
DennisVM-D2i