web-dev-qa-db-fra.com

Puis-je faire un <button> pas soumettre un formulaire?

J'ai un formulaire avec 2 boutons

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

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

J'utilise le bouton de jQuery UI sur eux aussi, simplement comme ça

$('button').button();

Cependant, le premier bouton soumet également le formulaire. J'aurais pensé que s'il n'avait pas le type="submit", il n'en aurait pas.

Évidemment je pourrais le faire

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

Mais y a-t-il un moyen que je puisse empêcher ce bouton précédent de soumettre le formulaire sans intervention de JavaScript?

Pour être honnête, j’ai utilisé un bouton uniquement pour pouvoir le styler avec jQuery UI. J'ai essayé d'appeler button() sur le lien et cela n'a pas fonctionné comme prévu (l'air assez moche!).

javascriptjqueryhtmljquery-uibutton
461
alex

La valeur par défaut pour les type attribut de button éléments est "submit". Réglez-le sur type="button" pour produire un bouton qui n'envoie pas le formulaire.

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

Dans les mots du HTML Standard : "Ne fait rien".

1001
Josh Lee

L'élément button a un type par défaut de submit.

Vous pouvez le faire ne rien faire en définissant un type de button:

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

Il suffit d'utiliser le bon vieux HTML:

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

Enveloppez-le comme sujet d'un lien, si vous le souhaitez:

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

Ou si vous souhaitez que javascript fournisse une autre fonctionnalité:

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

Honnêtement, j'aime les autres réponses. Facile et pas besoin d'entrer dans JS. Mais j'ai remarqué que vous posiez des questions sur jQuery. Ainsi, par souci d'exhaustivité, dans jQuery, si vous renvoyez false avec le gestionnaire .click (), l'action par défaut du widget sera annulée.

Voir ici pour un exemple (et plus de goodies, aussi). Voici la documentation aussi .

en un mot, avec votre exemple de code, procédez comme suit:

<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>

De plus, avec ceci, vous pouvez vous débarrasser de la balise d'ancrage et simplement utiliser le bouton.

5
TCCV

Sans définir l'attribut type, vous pouvez également renvoyer false à partir de votre gestionnaire OnClick et déclarer l'attribut onclick sous la forme onclick="return onBtnClick(event)".

0
DennisVM-D2i