Biểu mẫu được gửi khi tôi nhấp vào nút trong biểu mẫu. Làm thế nào để tránh điều này?

Question

Tôi sử dụng twitter-boostrap và tôi muốn sử dụng these radio-buttons dưới dạng của tôi. Vấn đề là khi tôi nhấp vào bất kỳ nút nào trong số này, biểu mẫu sẽ được gửi ngay lập tức. Làm cách nào để tránh điều này? Tôi chỉ muốn sử dụng các nút mặc định như nút radio.

từ:

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

Từ mỹ HTML5 specification:

Một nút phần tử với không loại thuộc tính quy định hiện điều tương tự như một nút bấm ent với thuộc tính type được đặt thành "submit".

Và một <button type="submit"> gửi biểu mẫu thay vì hành xử như đơn giản <button type="button"> push-button.

Các HTML4 spec nói điều tương tự:

type = nộp | nút | reset [CI]
Thuộc tính này tuyên bố các loại nút. Giá trị có thể có:

• submit: Tạo nút gửi. Đây là giá trị mặc định.
• reset: Tạo nút đặt lại.
• button: Tạo nút nhấn.

Vì vậy <button> yếu tố của bạn:

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

cũng giống như những (trong các trình duyệt tương thích):

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

và bất cứ lúc nào bạn nhấn một trong những nút bạn sẽ gửi biểu mẫu của bạn.

Các giải pháp là sử dụng nút đơn giản:

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

Một số phiên bản của IE mặc định để type="button" bất chấp những gì tiêu chuẩn nói. Bạn phải luôn chỉ định thuộc tính type khi sử dụng <button> chỉ để đảm bảo rằng bạn sẽ nhận được hành vi mà bạn mong đợi.

Answer 2

Bạn có thể sử dụng preventDefault() cho điều này

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

hoặc bạn có thể cập nhật html của bạn với mã sau đây (chỉ cần thêm type="button") tại nút 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 %>