Form submitted twice, due to :remote=>true

问题

My form submitted twice, after double checked, it was cause by ':remote=>true'. I removed it, my project works well. Who can show me why? And how to use ':remote=>true'?

My ruby code:

<%= 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 %>

The final html code in browser.

 <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>

回答1:

In case people are stumbling on this question like I did:

I had the same problem, and sannankhalid's answer didn't fix it, but deleting a locally precompiled application.js in the public/assets directory did -- the ujs is included twice, so it fires twice. Via https://stackoverflow.com/a/9627690/604093

回答2:

On Rails 5, rails-ujs replaces jquery_ujs. Events will trigger twice if both are required.

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

回答3:

I am assuming that you are using jquery. This is usually happened when there is an incomplete call or there is some sort of error and you haven't refresh the page. Try something like this:

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

回答4:

It seems that Ryan Muller's answer is correct. But removing application.js is not proper way to do as per my view. What I have done is I have opened the developer's tool in chrome and click on network part. Now when I click on submit button then it would show me that who is making request. So I removed that JS and tried it again and it works. So as per Ryan Muller its correct that its problem of JS by including twice. But make sure you maintain the dependency of JS as well.

回答5:

Try ctrl-c on the server to stop it. Then rm -r public/assets/ to get rid of the assets directory (and the duplicate application.js). Restart the server from the same terminal window and it might work as expected.

回答6:

Wanted to add another possible cause for this. For me it was using Mixpanel's api. Specifically https://mixpanel.com/docs/integration-libraries/javascript-full-api#track_forms

It seems, that using :remote=> true in conjunction with mixpanel.track_forms will cause the form to submit via normal html after the desired json.

It's a probably rare, but took me a while to track down.

回答7:

Here is the HAML equivalent to sannankhalid's.

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

I had the double-POST issue with Rails 4 and Bootstrap 3 (w/jQuery), submitting form updates from modals.

回答8:

in your application template (or wherever you keep the <%= javascript_include_tag "application" %> tag or the haml equivalent, add the "data-turbolinks-track" => true flag, so the tag will now look like this: <%= javascript_include_tag "application", "data-turbolinks-track" => true %>.

回答9:

It happened to me once the solution was to remove the google tag manager, because I was tracking the form submission with it.

<!-- 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>

来源：https://stackoverflow.com/questions/7411271/form-submitted-twice-due-to-remote-true