表单提交了两次，由于 :remote=>true答案

【问题标题】：Form submitted twice, due to :remote=>true表单提交了两次，由于 :remote=>true
【发布时间】：2011-11-16 16:44:50
【问题描述】：

我的表单提交了两次，经过仔细检查，是由 ':remote=>true' 引起的。我删除了它，我的项目运行良好。谁能告诉我为什么？以及如何使用':remote=>true'？

我的红宝石代码：

<%= form_tag(admin_product_group_product_scopes_path(@product_group), :remote => true, :id => 'new_product_group_form') do %>
    <%
    options =
    grouped_options_for_select(
    Scopes::Product::SCOPES.map do |group_name, scopes|
      [
        t(:name, :scope => [:product_scopes, :groups, group_name]),
        scopes.keys.map do |scope_name|
          [ t(:name, :scope => [:product_scopes, :scopes, scope_name]), scope_name]
        end
      ]
    end
    )
    %>
    <p>
      <label for="product_scope_name"><%= t('add_scope') %></label>
      <%= select_tag("product_scope[name]", options) %>
      <input type="submit" value="<%= t('add') %>" />
    </p>
  <% end %>

浏览器中的最终 html 代码。

 <form accept-charset="UTF-8" action="/admin/product_groups/17/product_scopes" data-remote="true" id="new_product_group_form" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓"><input name="authenticity_token" type="hidden" value="GocX/l4ZNgF/feKtzC8FuohebM2k5MuIHtdeGp2Oi0A="></div>
    <p>
      <label for="product_scope_name">Add a scope</label>
      <select id="product_scope_name" name="product_scope[name]"><optgroup label="Taxon"><option value="taxons_name_eq">In Taxon(without descendants)</option>
<option value="in_taxons">In taxons and all their descendants</option></optgroup><optgroup label="Text search"><option value="in_name">Product name have following</option>
<option value="in_name_or_keywords">Product name or meta keywords have following</option>
<option value="in_name_or_description">Product name or description have following</option>
<option value="with_ids">Products with IDs</option></optgroup><optgroup label="Values"><option value="with">With value</option>
<option value="with_property">With property</option>
<option value="with_property_value">With property value</option>
<option value="with_option">With option</option>
<option value="with_option_value">With option and value</option></optgroup><optgroup label="Price"><option value="price_between">Price between</option>
<option value="master_price_lte">Master price lesser or equal to</option>
<option value="master_price_gte">Master price greater or equal to</option></optgroup></select>
      <input type="submit" value="Add">
    </p>
</form>

【问题讨论】：

标签： ruby-on-rails ruby ruby-on-rails-3 forms post

【解决方案1】：

如果人们像我一样在这个问题上磕磕绊绊：

我遇到了同样的问题，sannankhalid 的回答没有解决它，但是删除了 public/assets 目录中的本地预编译 application.js 确实 - ujs 被包含两次，所以它会触发两次。通过https://stackoverflow.com/a/9627690/604093

【讨论】：

也解决了我的问题 - 推荐这个而不是 @Muhammad 的解决方案，因为它不是“黑客”，而是解决问题原因的方法。
难以置信的错误..你是对的，清除公共/资产目录

【解决方案2】：

在 Rails 5 上，rails-ujs 替换了 jquery_ujs。如果两者都需要，事件将触发两次。

// app/assets/javascripts/application.js
//= require jquery_ujs <-- delete this
//= require rails-ujs

【讨论】：

删除 jquery_ujs 确实解决了这个特定问题，但是由于“无法验证 CSRF 令牌真实性”，我的请求开始遇到错误。最终遇到了这个：stackoverflow.com/a/42773086/3662784.
@uhezay 我不明白 jquery_ujs 之间的关系，你面临的问题和链接。你能解释一下吗？
我的表单提交了两次，我从 application.js 中删除了 jquery_ujs 并且停止发生但是由于“无法验证 CSRF 令牌真实性”错误（这是通过删除引入jquery_ujs，它会自动处理令牌），因此我需要寻找另一个解决方案。 stackoverflow.com/a/42773086/3662784 就是那个解决方案。有意义吗？
我虽然 rails-ujs 也会处理 CSRF 令牌。多么不幸。
HI @uhezay 你在删除 jquery_ujs 并离开 rails-ujs 后解决了问题吗？我对 CSRF 令牌有同样的问题

【解决方案3】：

我假设您使用的是 jquery。这通常发生在调用不完整或出现某种错误并且您没有刷新页面时。试试这样的：

<script type="text/javascript">
$('#new_product_group_form').submit(function() {
                    $(this).unbind('submit').submit();
       });
</script>

【讨论】：

【解决方案4】：

看来 Ryan Muller 的回答是正确的。但是根据我的观点，删除 application.js 不是正确的方法。我所做的是我在 chrome 中打开了开发人员的工具，然后单击网络部分。现在，当我单击提交按钮时，它会告诉我谁在提出请求。所以我删除了那个JS并再次尝试它并且它有效。因此，根据 Ryan Muller 的说法，它的 JS 问题包含两次是正确的。但请确保您也维护了 JS 的依赖关系。

【讨论】：

【解决方案5】：

尝试在服务器上使用ctrl-c 来阻止它。然后rm -r public/assets/ 删除资产目录（以及重复的 application.js）。从同一终端窗口重新启动服务器，它可能会按预期工作。

【讨论】：

【解决方案6】：

想为此添加另一个可能的原因。对我来说，它使用的是 Mixpanel 的 api。具体https://mixpanel.com/docs/integration-libraries/javascript-full-api#track_forms

看来，将:remote=> true 与mixpanel.track_forms 结合使用会导致表单在所需的json 之后通过普通html 提交。

这可能很少见，但我花了一段时间才找到。

【讨论】：

【解决方案7】：

这是与 sannankhalid 等效的 HAML。

:javascript
  = f.submit(function() {
    $(this).unbind('submit').submit();
  });

我在使用 Rails 4 和 Bootstrap 3（w/jQuery）时遇到了双重 POST 问题，从 modals 提交表单更新。

【讨论】：

【解决方案8】：

在您的应用程序模板中（或您保留标记或 haml 等效项的任何位置，添加 "data-turbolinks-track" => true 标志，因此该标记现在看起来像这样: true %>。

【讨论】：

【解决方案9】：

一旦解决方案是删除谷歌标签管理器，我就遇到了这种情况，因为我正在用它跟踪表单提交。

<!-- Google Tag Manager -->
 <noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-PQZJ2T"
 height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
 <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
 new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
 j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
 '//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
 })(window,document,'script','dataLayer','GTM-PQZJ2T');</script>

【讨论】：

【解决方案10】：

在大多数情况下，此问题是由多次包含 jquery_ujs 或 rails_ujs 引起的。

查看讨论：https://github.com/rails/jquery-ujs/issues/208

【讨论】：