Question

我正在rails 4中创建一个远程/ ajax表单。这是代码：

        <div id="new-email-form-section" class="new-attribute-section">
            <%= form_for [@user, @contact, @contact_email], :format => :js, :remote => true do |f| %>
              <input type="hidden" value="<%= form_authenticity_token %>" name="authenticity_token" />
              <div class="new-attribute-fields">
                <div id="new-email-form-tag">Label: <%= f.text_field :tag %></div>
                <div id="new-email-form-email">Email: <%= f.text_field :email %></div>
              </div>
              <div class="new-attribute-btns">
                <div id="new-email-submit">
                  <%= f.submit "Add", :class => "btn new-attribute-submit-btn" %>
                </div>
                <div id="new-email-cancel">
                  <button id="new-email-cancel-btn" class="btn new-attribute-cancel-btn">Cancel</button>
                </div>
              </div>
            <% end %>
          </div>

当用户点击页面顶部的“显示”链接时，此表单将被隐藏并显示。单击“取消”按钮后，再次使用jQuery / Coffeescript隐藏表单，如此...

$(".new-attribute-cancel-btn").click ->
  $(this).closest(".new-attribute-section").hide()

当我点击“取消”按钮时，表单被隐藏...但表单也被提交（通过ajax）。我假设rails将提交脚本应用于我的提交按钮以及我的“取消”按钮，因为它包含在表单标签中。有什么方法可以避免这种情况吗？或者在表单中放置这个“取消”按钮只是不好的形式（没有双关语）？

Answer 1

您可以使用event.preventDefault()按钮上的click事件{...}}阻止默认提交：

cancel

Answer 2

问题是<button>也会提交表单。请使用<input type="button">来显示“正常”按钮，该按钮不会提交。

http://www.w3schools.com/tags/tag_button.asp

如果要使用rails创建按钮，请使用此帮助程序：

<%= submit_tag l(:button_cancel), :name => 'form_cancel', :onclick => "hideForm(this);", :type => 'button' %>

单击非提交按钮时，Rails远程表单提交

2 个答案: