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