web-dev-qa-db-fra.com

Le formulaire est soumis lorsque je clique sur le bouton du formulaire. 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 . éviter cela? Je veux juste utiliser les boutons par défaut comme les boutons radio.

de:

<%= form_for @product do |f| %>
    <div class="control-group">
      <%= f.label :type, :class => 'control-label' %>

      <div class="controls">
        <div class="btn-group" data-toggle="buttons-radio">
          <button class="btn">Button_1</button>
          <button class="btn">Button_2</button>
        </div>
      </div>

    </div>

    <div class="form-actions">
      <%= f.submit nil, :class => 'btn btn-primary' %>
      <%= link_to 'Cancel', products_path, :class => 'btn' %>
    </div>
<% end %>

javascript:

// application.js
$('.tabs').button();
htmlruby-on-railstwitter-bootstrap
49
evfwcqcg

De l'amende spécification HTML5 :

Un élément bouton pour lequel aucun attribut type n'est spécifié est identique à un élément de bouton dont l'attribut type est défini sur "submit".

Et un <button type="submit"> envoie le formulaire plutôt que de se comporter comme un simple <button type="button"> Bouton-poussoir .

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

type = submit | bouton | réinitialiser [CI]
Cet attribut déclare le type du bouton. Valeurs possibles:

  • submit: Crée un bouton d'envoi. 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 <button>:

<button class="btn">Button_1</button>
<button class="btn">Button_2</button>

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

<button type="submit" class="btn">Button_1</button>
<button type="submit" class="btn">Button_2</button>

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

La solution consiste à utiliser des boutons simples:

<button type="button" class="btn">Button_1</button>
<button type="button" class="btn">Button_2</button>

Certaines versions de IE utilisent par défaut type="button" malgré ce que dit la norme. Vous devez toujours spécifier l'attribut type lorsque vous utilisez un <button> uniquement pour vous assurer que vous obtiendrez le comportement que vous attendez.

144
mu is too short

Vous pouvez utiliser preventDefault() pour cela

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

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

<%= form_for @product do |f| %>
    <div class="control-group">
      <%= f.label :type, :class => 'control-label' %>

      <div class="controls">
        <div class="btn-group" data-toggle="buttons-radio">
          <button class="btn" type="button">Button_1</button>
          <button class="btn" type="button">Button_2</button>
        </div>
      </div>

    </div>

    <div class="form-actions">
      <%= f.submit nil, :class => 'btn btn-primary' %>
      <%= link_to 'Cancel', products_path, :class => 'btn' %>
    </div>
<% end %>
0
Super User