Form submitted twice, due to :remote=>true

Question

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>

Answer 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

Answer 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

Answer 3

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.

Answer 4

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>

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

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

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

Answer 8

在您的应用程序模板（或任何您保留 <%= javascript_include_tag "application" %> 标记或等效的 haml 标记中，添加“data-turbolinks-track” => true 标志，因此标记现在将如下所示：<% = javascript_include_tag "application", "data-turbolinks-track" => true %>.

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

Answer 10

In most cases, this issue is caused by jquery_ujs or rails_ujs being included multiple times.

See discussion on: https://github.com/rails/jquery-ujs/issues/208