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

From the fine HTML5 specification:

A button element with no type attribute specified represents the same thing as a button element with its type attribute set to "submit".

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

The HTML4 spec says the same thing:

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

• submit: Creates a submit button. This is the default value.
• reset: Creates a reset button.
• button: Creates a push button.

So your <button> elements:

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

are the same as these (in compliant browsers):

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

and any time you hit one of those buttons you'll submit your form.

The solution is to use plain buttons:

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

Some versions of IE default to type="button" despite what the standard says. You should always specify the type attribute when using a <button> just to be sure that you will get the behavior you're expecting.

You can use preventDefault() for this

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

or you can update your html with following code (just add type="button") in button 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 %>

You can do this directly using rails form helper also by specifying type as an option to "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 %>