web-dev-qa-db-ja.com

フォームのボタンをクリックすると、フォームが送信されます。これを避ける方法は？

私は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();
htmlruby-on-railstwitter-bootstrap
53
evfwcqcg

罰金 HTML5仕様 から：

buttontype属性が指定されていない要素は、type属性が"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"にデフォルト設定されています。<button>を使用するときは、期待どおりの動作が得られることを確認するために、常にtype属性を指定する必要があります。

149
mu is too short

これには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 %>
0
Super User

「ボタン」のオプションとしてtypeを指定することにより、Railsフォームヘルパーを使用して直接これを行うことができます。

<%= 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 %>
0
Atul Vaibhav