每个按钮都会调用创建操作（不仅仅是“提交”一个）

Question

我有一个交易表格，其中包含一些文本和选择字段。有一个文本字段date，我在其中使用jQuery.ui.datepicker。我隐藏了文本字段并改用按钮（“今天”、“昨天”和“日历图标”按钮）。 “昨天”和“今天”按钮更改隐藏字段的值，但如果其他字段已填充或导致状态为 500 的内部服务器错误，它们也会调用 submit 操作并创建事务。我只需要调用 create 操作点击submit按钮。

这是transaction_controller.rb的创建动作

def create
    if @transaction.save
      respond_to do |format|
        format.html { redirect_to root_url }
        format.js
      end
    else
      render 'pages/index'
    end
  end

这是transaction_form 用于new 事务操作。

<%= form_for @transaction, remote: true do |f| %>
    <%= render 'shared/error_messages', object: f.object %>
    <div class="form-row">
      <%= f.text_field :name, class: 'input-medium', 'placeholder' => 'Name' %>
      <%= f.text_field :amount, class: 'input-small', 'placeholder' => '$' %>
      <%= f.submit 'Add', class: 'btn btn-primary' %>
    </div>

    <%= f.collection_select :category_id, current_user.categories.all, :id, :name, {}, class: 'input-medium' %>
    <%= f.collection_select :account_id, current_user.accounts.all, :id, :name, {}, class: 'input-small' %>
    <%= f.text_field :date, 'value' => Date.today %>

    <div class="btn-group" id="transaction_date_group">
      <button class="btn active" id="transaction_today">Today</button>
      <button class="btn" id="transaction_yesterday">Yesterday</button>
      <button class="btn dropdown-toggle" data-toggle="dropdown" id="transaction_date_dropdown">
        <i class="icon-calendar"></i>
      </button>
    </div>

<% end %>

这是create.js.erb

$('#transactions_table').prepend('<%= j render(@transaction) %>');
$('#new_transaction').each(function () {
    this.reset();
});
<% if @transaction.category_id == current_user.categories.first.id && current_user.categories.first.balance == @transaction.amount %>
$('#categories_table').append('<%= j render(@category) %>');
<% end %>
$('#edit_category_<%= @transaction.category_id %>').replaceWith('<%= j render(@category) %>');
$('#edit_category_<%= @transaction.category_id %>').hide().fadeIn('slow');
$('#edit_account_<%= @transaction.account_id %>').replaceWith('<%= j render(@account) %>');
$('#edit_account_<%= @transaction.account_id %>').hide().fadeIn('slow');
$('#accounts_total').replaceWith('<td id="accounts_total"><%= current_user.accounts.sum(:balance) %></td>');
$('#accounts_total').hide().fadeIn('slow');

这是transaction.js.coffee，用于datepicker在单击时显示和更改按钮类别。

jQuery ->
  $("#transaction_date").datepicker dateFormat: "yy-mm-dd"

  $("#transaction_date_dropdown").click ->
    if $("#transaction_date_group").hasClass 'open'
      $("#transaction_date").datepicker 'hide'
    else
      $("#transaction_date").datepicker 'show'
      $("#transaction_today").removeClass 'active'
      $("#transaction_yesterday").removeClass 'active'

  $("#transaction_yesterday").click ->
    $("#transaction_today").removeClass 'active'
    $("#transaction_yesterday").addClass 'active'
    yesterday = moment().add('days', -1).format 'YYYY-MM-DD'
    $("#transaction_date").val yesterday

  $("#transaction_today").click ->
    $("#transaction_yesterday").removeClass 'active'
    $("#transaction_today").addClass 'active'
    today = moment().format 'YYYY-MM-DD'
    $("#transaction_date").val today

谢谢！

Answer 1

在每次点击事件回调中添加 return false

$("#transaction_yesterday").click ->
  ..
  $("#transaction_date").val yesterday
  return false

Answer 2

来自fine specification：

未指定type 属性的button 元素与将type 属性设置为"submit" 的button 元素表示相同的东西。

所以这个：

<button class="btn active" id="transaction_today">Today</button>

其实就是一个提交按钮和提交按钮提交表单。如果您不希望 <button>s 提交表单，请使用 type="button" 按钮说明：

<button type="button" class="btn active" id="transaction_today">Today</button>

一些较旧的 IE 默认为 type="button"，尽管（或尽管）规范说明了什么，因此您应该始终在使用 <button> 时指定 type 属性。