Il modulo viene inviato quando faccio clic sul pulsante nel modulo. Come evitare questo?

Question

Uso Twitter-Boostrap e mi piacerebbe utilizzare these radio-buttons nel mio modulo. Il problema è quando clicco su uno di questi pulsanti, il modulo viene inviato immediatamente. Come evitare questo? Voglio solo usare i pulsanti predefiniti come i pulsanti radio.

da:

<%= 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(); 

Answer 1

Dalla fini HTML5 specification:

Un pulsante elemento senza tipo di attributo indicata rappresenta la stessa cosa un bottone elem ent con il suo attributo type impostato su "submit".

E un <button type="submit"> invia il modulo anziché comportarsi come un semplice <button type="button"> push-button.

Il HTML4 spec dice la stessa cosa:

type = submit tasto | | azzerare [CI]
Questo attributo dichiara il tipo di pulsante. Valori possibili:

• submit: Crea un pulsante di invio. Questo è il valore predefinito.
• reset: Crea un pulsante di ripristino.
• button: crea un pulsante.

Così i vostri <button> elementi:

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

sono le stesse di questi (nei browser compatibili):

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

e ogni volta che si preme uno di questi pulsanti Avrete invia il tuo modulo.

La soluzione è quella di utilizzare i pulsanti semplici:

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

Alcune versioni di IE di default per type="button" nonostante quello che dice la norma. Devi sempre specificare l'attributo type quando usi un <button> solo per essere sicuro che otterrai il comportamento che ti aspetti.

Answer 2

È possibile utilizzare preventDefault() per questo

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

o è possibile aggiornare il codice HTML con codice seguente (basta aggiungere type="button") nella modifica del tasto

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