javascript - Kan jeg få en <button> til å ikke sende inn et skjema?

Jeg har et skjema, med 2 knapper

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

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

Jeg bruker jQuery UIs knapp på dem også, enkelt slik

$('button').button();

Men den første knappen sender også inn skjemaet. Jeg hadde trodd at hvis den ikke hadde type="submit", ville den ikke gjort det.

Selvfølgelig kunne jeg gjort dette

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

Men finnes det en måte jeg kan stoppe tilbakeknappen fra å sende inn skjemaet uten JavaScript-tiltak?

For å være ærlig, brukte jeg bare en knapp slik at jeg kunne style den med jQuery UI. Jeg prøvde å kalle button() på linken, og det fungerte ikke som forventet (så ganske stygt ut!).

Svar #1

Standardverdien for type-attributtet til button-elementer er "submit". Sett den til type="button" for å lage en knapp som ikke sender inn skjemaet.

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

I ordene til HTML-standarden: "Gjør ingenting."

Svar #2

button-elementet har en standardtype på submit.

Du kan få den til å ikke gjøre noe ved å sette en type button:

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

Svar #3

Bare bruk god gammel HTML:

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

Pakk det inn som emnet i en lenke, hvis du ønsker det:

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

Eller hvis du bestemmer deg for at du vil at JavaScript skal gi noen annen funksjonalitet:

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

Svar #4

Ja, du kan få en knapp til å ikke sende inn et skjema ved å legge til et attributt med typen verdien button:

<button type="button"><button>

Relaterte artikler