Peut-on faire en sorte qu'un <bouton>ne soumette pas un formulaire ?

Question

J'ai un formulaire, avec 2 boutons

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

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

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

$('button').button();

Cependant, le premier bouton permet également de soumettre le formulaire. J'aurais pensé que s'il n'y avait pas l'option type="submit" ce n'est pas le cas.

Je pourrais évidemment faire ça

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

Mais existe-t-il un moyen d'empêcher ce bouton retour de soumettre le formulaire sans intervention de JavaScript ?

Pour être honnête, j'ai utilisé un bouton uniquement pour pouvoir le styliser avec jQuery UI. J'ai essayé d'appeler button() sur le lien et cela n'a pas fonctionné comme prévu (c'était plutôt moche !).

Answer 1

La valeur par défaut de l'option type l'attribut de button éléments es "soumettre". Réglez-le sur type="button" pour produire un bouton qui ne soumet pas le formulaire.

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

Selon les termes de la Norme HTML : "Ne fait rien."

Answer 2

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

Vous pouvez faire en sorte qu'il ne fasse rien en fixant un type de button :

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

Answer 3

Utilisez simplement le bon vieux HTML :

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

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

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

Ou si vous décidez que vous voulez que le javascript fournisse une autre fonctionnalité :

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

Answer 4

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

Answer 5

Honnêtement, j'aime les autres réponses. C'est facile et il n'est pas nécessaire d'entrer dans JS. Mais j'ai remarqué que votre question portait sur JQuery. Donc, pour être complet, en jQuery, si vous renvoyez false avec le gestionnaire .click(), cela annulera l'action par défaut du widget.

Voir ici pour un exemple (et d'autres goodies, aussi). Voici également la documentation .

en bref, avec votre exemple de code, faites ceci :

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

En outre, vous pouvez vous débarrasser de la balise d'ancrage et utiliser simplement le bouton.