The form is submitted when I click the button on the form. How to avoid this?

Question

I use twitter-boostrap and I would like to use these radio buttons in my form. The problem is that when I click on any of these buttons, the form is submitted immediately. How to avoid this? I just want to use the default buttons, such as radio buttons.

from

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

From the thin HTML5 spec :

A button element without a specified type attribute is the same as a button element with a type attribute set to "submit".

And the <button type="submit"> submits the form, rather than behaving like a simple <button type="button"> button .

The HTML4 specification says the same thing:

type = submit | button | reset [CI]
This attribute declares the type of button. Possible values:

• submit : creates a submit button. This is the default value.
• reset : create a reset button.
• button : create a button.

So your <button> elements:

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

same (in compatible browsers):

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

and every time you click one of these buttons, you submit your form.

The solution is to use simple buttons:

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

Some versions of IE use type="button" by default, despite what the standard says. You should always specify the type attribute when using <button> to ensure you get the expected behavior.

Answer 2

You can use preventDefault() for this

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

or you can update your html with the following code (just add type="button" ) to the tag

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

Answer 3

You can do this directly using the rail shape wizard, also specifying type as an option for the "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"> <%= f.button "Button_1", type: "button", class: "btn" %> <%= f.button "Button_2", type: "button", class: "btn" %> </div> </div> </div> <div class="form-actions"> <%= f.submit nil, :class => 'btn btn-primary' %> <%= link_to 'Cancel', products_path, :class => 'btn' %> </div> <% end %>