Форма отправляется, когда я нажимаю кнопку в форме. Как этого избежать?

Я использую twitter-boostrap, и я бы хотел использовать эти радиокнопки в моей форме. Проблема в том, что когда я нажимаю на любую из этих кнопок, форма немедленно отправляется. Как этого избежать? Я просто хочу использовать кнопки по умолчанию, такие как радиокнопки.

от

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

Ответ 1

Из тонкой спецификации HTML5:

Элемент кнопки без указанного атрибута типа представляет собой то же самое, что и элемент кнопки с атрибутом типа, установленным как "submit".

И <button type="submit"> отправляет форму, а не ведет себя как простая <button type="button"> кнопка.

HTML4 спецификация говорит то же самое:

type = submit | button | reset [CI]
Этот атрибут объявляет тип кнопки. Возможные значения:

submit: создает кнопку отправки. Это значение по умолчанию.

reset: создание кнопки сброса.

button: создание кнопки.

Итак, ваши элементы <button>:

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

такие же (в совместимых браузерах):

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

и каждый раз, когда вы нажимаете одну из этих кнопок, вы отправляете свою форму.

Решение состоит в том, чтобы использовать простые кнопки:

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

В некоторых версиях IE по умолчанию используется type="button", несмотря на то, что говорится в стандарте. Вы всегда должны указывать атрибут type при использовании <button>, чтобы быть уверенным, что вы получите ожидаемое поведение.

Ответ 2

Вы можете использовать preventDefault() для этого

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

или вы можете обновить свой html следующим кодом (просто добавьте type="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 %>

Ответ 3

Вы можете сделать это напрямую, используя помощник по формам рельсов, также указав type в качестве опции для "кнопки":

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