양식의 버튼을 클릭하면 양식이 제출됩니다.

양식의 버튼을 클릭하면 양식이 제출됩니다. 이것을 피하는 방법?

---

저는 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 %>

자바 스크립트 :

// application.js
$('.tabs').button();

---

훌륭한 HTML5 사양에서 :

버튼 아니오 요소 유형 지정된 속성에 해당 유형의 속성 세트와 버튼 요소와 동일한 것을 나타낸다 "제출"을 .

그리고 a <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>.

---

preventDefault()이것을 위해 사용할 수 있습니다

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

또는 type="button"버튼 태그에 다음 코드를 추가하여 html을 업데이트 할 수 있습니다.

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

ReferenceURL : https://stackoverflow.com/questions/9643806/form-is-submitted-when-i-click-on-the-button-in-form-how-to-avoid-this