当我点击窗体中的按钮时，表单被提交。如何避免这种情况？ [英] Form is submitted when I click on the button in form. How to avoid this?

问题描述

我使用twitter-boostrap，并希望在我的表单中使用这些单选按钮 。
问题是当我点击这些按钮时，表单立即被提交。
如何避免这种情况？我只想使用默认按钮，如单选按钮。

from：

 <％= form_for @product do | f | ％GT; 
< div class =control-group> 
<％= f.label：type，：class => 'control-label'％> 
 
< div class =controls> 
< div class =btn-groupdata-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'取消'，products_path，：class => 'btn'％> 
< / div> 
<％end％> 
  

javascript：

  // application.js 
 $（'。tabs'）。button（）; 
  

解决方案

从罚款 HTML5规范：

A type 属性的 元素表示与type属性设置为submit的按钮元素相同的内容。 $ b

以及 < button type =submit> 提交表单，而不是像简单的 < button type =button> 按钮。

HTML4规范 a>表示同样的事情：

type = submit | button | reset b $ b此属性声明按钮的类型。可能的值：

• 提交：创建一个提交按钮。这是默认值。


• reset ：创建重置按钮。


• 按钮：创建一个按钮。
  

您的<按钮> 元素：

 < button class = BTN> Button_1< /按钮> 
< button class =btn> Button_2< / button> 
  

与这些（在兼容的浏览器中）相同：

 < button type =submitclass =btn> Button_1< / button> 
< button type =submitclass =btn> Button_2< / button> 
  

以及任何时候您点击其中一个按钮即可提交表单。

解决方案是使用普通按钮：

 < button type =button类= BTN > Button_1< /按钮> 
< button type =buttonclass =btn> Button_2< / button> 
  

一些版本的IE默认为 type =button<按钮> 时，您应该始终指定类型属性，以确保您将获得行为你在等待。

I use twitter-boostrap and I'd like to use these radio-buttons in my form. The problem is when I click on any of these buttons, the form is immediately submitted. How to avoid this? I just want to use default buttons like 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();

解决方案

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.

这篇关于当我点击窗体中的按钮时，表单被提交。如何避免这种情况？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！