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>

score 54 · Accepted Answer · edited May 23 '17 at 12:18

54

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

edited May 23 '17 at 12:18

Community

1
1

answered Mar 16 '12 at 02:33

Ryan Muller

708
7
7

2

Fixed my problems aswell - recommend this over @Muhammad's solution since it's not a "hack" but actually a solution to the cause of the problems. – gernberg Apr 23 '12 at 00:56
unbeliveable bug.. you're right, Clear public/assets dir – Albert.Qing Apr 03 '15 at 04:04

score 26 · Answer 2 · answered May 18 '17 at 20:31

26

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

answered May 18 '17 at 20:31

João Souza

4,032
3
25
38

Removing jquery_ujs did resolve this specific problem, but then I started to run into errors with my requests due to "Can't verify CSRF token authenticity". Eventually came across this: https://stackoverflow.com/a/42773086/3662784. – uhezay Aug 10 '17 at 03:52
1

@uhezay I don't understand the relation between jquery_ujs, the problem you faced and the link. Would you explain? – João Souza Aug 10 '17 at 15:19
My form was submitting twice, I removed jquery_ujs from application.js and that stopped happening but then the remaining submit was unsuccessful due to "Can't verify CSRF token authenticity" errors (which was introduced by removing jquery_ujs, which handles the token automatically), so thus I needed to seek out another solution. https://stackoverflow.com/a/42773086/3662784 was that solution. Make sense? – uhezay Aug 11 '17 at 06:50
I though rails-ujs would handle the CSRF token too. How unfortunate. – João Souza Aug 11 '17 at 19:51
I have the same problem and this solution works for me. – Chivorn Kouch Dec 05 '17 at 04:18
1

HI @uhezay did you solve the problem after removing jquery_ujs and leaving rails-ujs ? I have the same problema with CSRF token – Andru1989 Mar 08 '18 at 17:14

score 3 · Answer 3 · answered May 14 '13 at 14:10

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.

enter image description here

score 3 · Answer 4 · answered Sep 14 '11 at 10:59

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>

score 2 · Answer 5 · answered Aug 25 '12 at 19:13

2

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.

answered Aug 25 '12 at 19:13

mjnissim

3,102
1
19
22

Greg Dean · Answer 6 · 2013-07-20T18:27:45.223

2

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.

edited Jul 20 '13 at 18:27

answered Jul 20 '13 at 03:36

Greg Dean

29,221
14
67
78

score 2 · Answer 7 · answered Jan 02 '14 at 19:55

2

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.

answered Jan 02 '14 at 19:55

Martin Sommer

536
5
14

score 0 · Answer 8 · answered Apr 04 '14 at 01:54

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

score 0 · Answer 9 · answered May 21 '14 at 13:07

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>

score 0 · Answer 10 · answered Oct 08 '20 at 13:13

0

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

answered Oct 08 '20 at 13:13

fkoessler

6,932
11
60
92

Form submitted twice, due to :remote=>true

10 Answers10

Linked