Formularz jest przesyłany po kliknięciu przycisku w formularzu. Jak tego uniknąć?

Question

Używam twitter-boostrap i chciałbym użyć these radio-buttons w moim formularzu. Problem polega na tym, że po kliknięciu dowolnego z tych przycisków formularz jest natychmiast przesyłany. Jak tego uniknąć? Chcę używać domyślnych przycisków, takich jak przyciski radiowe.

od:

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

Z drobnym HTML5 specification:

przycisk elementem bez typu atrybutu określonego oznacza to samo, co przycisk elem ent z jego atrybutem typu ustawionym na "prześlij".

I zamiast tego <button type="submit"> przesyła formularz, a nie zachowuje się jak zwykły <button type="button"> push-button.

HTML4 spec mówi to samo:

type = submit przycisk | | zresetować [CI]
Ten atrybut deklaruje typ przycisku. Możliwe wartości:

• submit: Tworzy przycisk przesyłania. Jest to wartość domyślna.
• reset: Tworzy przycisk resetowania.
• button: Tworzy przycisk.

więc <button> elementy:

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

są takie same jak te (w przeglądarkach zgodnych):

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

i za każdym razem trafisz jeden z tych przycisków będziesz zgłoś swój formularz.

Rozwiązaniem jest użycie zwykłego przyciski:

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

Niektóre wersje IE domyślnie do type="button" pomimo tego, co średnia mówi. Zawsze powinieneś określać atrybut type, gdy używasz <button> tylko po to, aby upewnić się, że uzyskasz oczekiwane zachowanie.

Answer 2

Można użyć preventDefault() tego

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

czy można zaktualizować html z następującego kodu (wystarczy dodać type="button") w tagu przycisk

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