Pulsante HTML per NON inviare il modulo

370

Ho un modulo Al di fuori di quel modulo, ho un pulsante. Un semplice pulsante, come questo:

<button>My Button</button>

Tuttavia, quando faccio clic su di esso, invia il modulo. Ecco il codice:

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

Tutto questo pulsante dovrebbe fare è un po 'di JavaScript. Ma anche quando appare proprio come nel codice sopra, invia il modulo. Quando cambio il pulsante tag in span, funziona perfettamente. Ma sfortunatamente, deve essere un pulsante. Esiste un modo per impedire a quel pulsante di inviare il modulo? Come ad es

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

javascript html

— Arik
fonte

3

Questo problema non è riproducibile nei browser moderni e il problema potrebbe originariamente derivare da un malinteso. Sebbene l'impostazione predefinita buttonsia type=submit, non è necessario inviare alcun modulo quando l' buttonelemento è esterno a qualsiasi modulo. A meno che non sia possibile fornire una dimostrazione effettiva (un documento di esempio, l'identificazione di un browser e una descrizione delle osservazioni che mostrano che è stato inviato un modulo), questa domanda dovrebbe essere chiusa in quanto non riproducibile. L'uso type=buttonè una buona pratica, ma questo non rende reale il problema.

— Jukka K. Korpela,

895

Penso che questa sia la piccola caratteristica più fastidiosa dell'HTML ... Questo pulsante deve essere di tipo "pulsante" per non essere inviato.

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

Aggiornamento 5 febbraio 2019: secondo lo standard HTML Living (e anche le specifiche HTML 5 ):

Il valore predefinito mancante e predefinito valore non valido sono il Invia stato del pulsante.

— Dave Markle
fonte

9

@Powerslave qualsiasi motivo per non farloto use <button>

— Sandip Pingle

4

@SandipPingle Non c'è motivo di usarlo, a meno che tu non abbia bisogno di un tipo di styling davvero complesso. Inoltre, IE6 e IE7 (fortunatamente eliminati gradualmente) <button>in alcuni casi gestiscono erroneamente. Inoltre, <button>non è compatibile al 100% tra browser diversi in quanto diversi browser possono inviare valori diversi per lo stesso <button>quando utilizzati in un modulo.

— Powerslave il

35

Questa è un'ottima risposta, ma non è una peculiarità . Il valore predefinito typedell'attributo in un <button>tag è submit. Se modificato in type=button, non <button>viene assegnato alcun comportamento predefinito. Vedi l' typeattributo qui: developer.mozilla.org/en-US/docs/Web/HTML/Element/button

— Michael Benjamin

1

Allora, qual è l'idea di <button type='submit'>È troppo difficile per me ahah. Comunque la tua risposta funziona alla grande!

— divHelper11

2

Il comportamento predefinito (e quindi implicito) di un elemento non specifico della forma è di attivare funzionalità specifiche della forma potenzialmente distruttive. In che modo non è una decisione di progettazione particolare da prendere per le specifiche HTML?

— OnoratoMule

36

return false;alla fine il gestore onclick farà il lavoro. Tuttavia, è meglio semplicemente aggiungere type="button"al <button>- in questo modo si comporta correttamente anche senza JavaScript.

— ThiefMaster
fonte

1

I pulsanti che non inviano moduli sono utili solo con JavaScript abilitato comunque ... Sono d'accordo che type = "button" è comunque più pulito.

— ThiefMaster,

2

return false;non funziona in tutti gli scenari, mentre type="Button"funziona. Anche con JavaScript abilitato.

— brejoc,

15

Dave Markle è corretto. Dal sito Web di W3School :

Specifica sempre l'attributo type per il pulsante. Il tipo predefinito per Internet Explorer è "pulsante", mentre in altri browser (e nella specifica W3C) è "invia".

In altre parole, il browser che stai utilizzando sta seguendo le specifiche del W3C.

— Gert Grenander
fonte

15

Per impostazione predefinita, i pulsanti html inviano un modulo.

Ciò è dovuto al fatto che anche i pulsanti situati all'esterno di un modulo fungono da mittenti (consultare il sito Web W3Schools: http://www.w3schools.com/tags/att_button_form.asp )

In altre parole, il tipo di pulsante è "invia" per impostazione predefinita

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

Pertanto, un modo semplice per aggirare il problema è utilizzare il tipo di pulsante .

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

Altre opzioni includono la restituzione di false alla fine di onclick o di qualsiasi altro gestore per quando si fa clic sul pulsante o per utilizzare invece un tag <input>

Per saperne di più, controlla le informazioni della rete di sviluppatori Mozilla sui pulsanti: https://developer.mozilla.org/en/docs/Web/HTML/Element/button

— GJZ
fonte

3

Si consiglia di non utilizzare il <Button>tag. Usa <Input type='Button' onclick='return false;'>invece il tag. (L'uso del "return false" non dovrebbe effettivamente inviare il modulo.)

Qualche materiale di riferimento

— Tim
fonte

2

È abbastanza da usare <input type="button" />ed è abbastanza per return false;- non c'è bisogno di fare entrambe le cose.

— Tom

Non sono d'accordo che si consiglia di non utilizzare il tag pulsante. Se non lo usi, perdi alcune funzionalità di accessibilità che otterrai automaticamente con il tag pulsante. Direi che il tag button è in realtà raccomandato per gli elementi che fungono da pulsanti.

— CookieMonster il

secondo la nota nel materiale di riferimento che hai collegato: "Mentre gli elementi <input> di tipo button sono ancora perfettamente validi HTML, l'elemento <button> più recente è ora il modo preferito per creare pulsanti." Quindi è esattamente l'opposto che hai dichiarato.

— jedzej,

1

Per motivi di accessibilità, non ho potuto farlo con più type=submitpulsanti. L'unico modo per lavorare in modo nativo con un formpulsante con più pulsanti, ma SOLO uno può inviare il modulo quando si preme il Entertasto è assicurarsi che uno solo di essi sia type=submitmentre altri sono in altri tipi come type=button. In questo modo, puoi beneficiare della migliore esperienza utente nella gestione di un modulo su un browser in termini di supporto della tastiera.

— motss
fonte

0

Un'altra opzione che ha funzionato per me è stata l'aggiunta di onsubmit = "return false;" al tag del modulo.

<form onsubmit="return false;">

Semanticamente probabilmente non è una soluzione valida come i metodi di cui sopra per modificare il tipo di pulsante, ma sembra essere un'opzione se vuoi solo un elemento del modulo che non verrà inviato.

— kk64738
fonte