Le formulaire est soumis lorsque je clique sur le bouton dans la forme. Comment éviter cela?

J’utilise twitter-boostrap et j’aimerais utiliser ces boutons radio dans mon formulaire. Le problème est que lorsque je clique sur l’un de ces boutons, le formulaire est immédiatement soumis. Comment éviter cela? Je veux juste utiliser les boutons par défaut comme les boutons radio.

de:

 
'control-label' %>
'btn btn-primary' %> 'btn' %>

javascript:

 // application.js $('.tabs').button(); 

De la spécification HTML5 fine:

Un élément button sans atsortingbut de type spécifié représente la même chose qu’un élément button dont l’atsortingbut type est défini sur “submit” .

Et un soumet le formulaire plutôt que de se comporter comme un simple .

La spécification HTML4 dit la même chose:

type = submit | button | reset [CI]
Cet atsortingbut déclare le type du bouton. Valeurs possibles:

  • submit : crée un bouton de soumission. Ceci est la valeur par défault.
  • reset : crée un bouton de réinitialisation.
  • button : crée un bouton-poussoir.

Donc, vos éléments :

   

sont les mêmes que ceux-ci (dans les navigateurs compatibles):

   

et chaque fois que vous appuyez sur l’un de ces boutons, vous soumettez votre formulaire.

La solution consiste à utiliser des boutons simples:

   

Certaines versions d’IE par défaut pour type="button" malgré ce que dit la norme. Vous devez toujours spécifier l’atsortingbut type lorsque vous utilisez un juste pour être sûr que vous obtiendrez le comportement que vous attendez.

Vous pouvez utiliser preventDefault() pour cela

 $('.btn').onClick(function(e){ e.preventDefault(); }); 

ou vous pouvez mettre à jour votre HTML avec le code suivant (ajoutez simplement type="button" ) dans la balise button

 <%= form_for @product do |f| %> 
<%= f.label :type, :class => 'control-label' %>
<%= f.submit nil, :class => 'btn btn-primary' %> <%= link_to 'Cancel', products_path, :class => 'btn' %>
<% end %>