Ruby on Rails - Form submitted twice due to Ajax

Viewed 648

My form submitted twice as below, it was cause by :remote=>true. I need to use ajax to get plan_id this value is from javascript.

Started POST "/users/sign_up" for 127.0.0.1 at 2018-08- 
29 13:31:04 +0900
Processing by Users::SignUpController#create as JSON
  Parameters: {"utf8"=>"✓", "user"=> 
{"deliveries_attributes"=>{"0"=>{"num"=>"1", 
"box_delivery_scheduled_on"=>"", 
"box_delivery_scheduled_range"=>""}}, 
"collects_attributes"=>{"0"=> 
{"box_collect_scheduled_on"=>"", 
"box_collect_scheduled_range"=>""}}, "last_name"=>"", 
"first_name"=>"", "last_name_kana"=>"", 
"first_name_kana"=>"", "birth(1i)"=>"", 
"birth(2i)"=>"", "birth(3i)"=>"", "zipcode"=>"", 
"prefecture"=>"", "address1"=>"", "address2"=>"", 
"building"=>"", "tel"=>"", "email"=>"", 
"email_confirmation"=>"", "credit_cards_attributes"=> 
{"0"=>{"number"=>"", "name"=>"", "exp_month"=>"", 
"exp_year"=>"", "last4"=>""}}, "password"=>" 
[FILTERED]", "password_confirmation"=>"[FILTERED]", 
"login_email"=>"123@gmail.com", "login_password"=>" 
[FILTERED]"}, "plan_id"=>"1"}
Plan Load (0.9ms)  SELECT  `plans`.* FROM `plans` WHERE 
`plans`.`deleted_at` IS NULL AND `plans`.`id` = 1 LIMIT 
 1
   User Load (0.7ms)  SELECT  `users`.* FROM `users` 
 WHERE `users`.`deleted_at` IS NULL AND `users`.`email` 
 = '123@gmail.com' ORDER BY `users`.`id` ASC LIMIT 1
   Completed 200 OK in 196ms (Views: 0.2ms | 
 ActiveRecord: 1.6ms)


Started POST "/users/sign_up" for 127.0.0.1 at 2018-08-29 13:31:04 +0900
Processing by Users::SignUpController#create as JS
  Parameters: {"utf8"=>"✓", "user"=> 
{"deliveries_attributes"=>{"0"=>{"num"=>"1", 
"box_delivery_scheduled_on"=>"", 
"box_delivery_scheduled_range"=>""}}, 
"collects_attributes"=>{"0"=> 
{"box_collect_scheduled_on"=>"", 
"box_collect_scheduled_range"=>""}}, "last_name"=>"", 
"first_name"=>"", "last_name_kana"=>"", 
"first_name_kana"=>"", "birth(1i)"=>"", 
"birth(2i)"=>"", 
"birth(3i)"=>"", "zipcode"=>"", "prefecture"=>"", 
"address1"=>"", "address2"=>"", "building"=>"", 
"tel"=>"", 
"email"=>"", "email_confirmation"=>"", 
"credit_cards_attributes"=>{"0"=>{"number"=>"", 
"name"=>"", 
"exp_month"=>"", "exp_year"=>"", "last4"=>""}}, 
"password"=>"[FILTERED]", "password_confirmation"=>" 
[FILTERED]", "login_email"=>"123@gmail.com", 
"login_password"=>"[FILTERED]"}, "commit"=>"ログインして 
確認へ進む"}

It trigger twice, even I've added remote: true in the form.

I also checked my app/assets/javascripts/application.js.coffee

# = require jquery3                                                                                                                         
# = require jquery_ujs
# = require bootstrap-sprockets

And checked /layouts/application.html.slim

doctype html                                                                                                                                
html
  head
    = render 'layouts/meta_tags'
    = stylesheet_link_tag 'application', media: 'all'
    = javascript_include_tag 'application'
    = csrf_meta_tags
  body
    = render 'layouts/navbar'
    = render 'shared/flash'
    main.container
      = yield

This is my form code

= form_for @user, url: users_sign_up_url, remote: true, html: { id: 
'users_sign_up_form' } do |f|                                           
  = render 'plan'              
  = f.fields_for :deliveries do |fd|
  .field                     
    = fd.label :num          
    = fd.select :num, (1..100).map { |n| ["#{n}", n] },{}, { id: 'js- 
    select-num' }
  .field
    = fd.label :box_delivery_scheduled
    = fd.select :box_delivery_scheduled_on, DateJaRange.new(Time.zone.now 
    + 1.day..Time.zone.now + 8.days)                   
    = fd.select: box_delivery_scheduled_range,Delivery.
    box_delivery_scheduled_ranges_i18n.invert
  = f.fields_for :collects do |fc|
  .field
    = fc.label :box_collect_scheduled
    = fc.select :box_collect_scheduled_on, DateJaRange.new(Time.zone.now + 
    3.days..Time.zone.now + 10.days)
    = fc.select :box_collect_scheduled_range,
    Collect.box_collect_scheduled_ranges_i18n.invert
  .row
    = f.label :email                                                                                                                          
    = f.text_field :login_email, as: :email
    p.error= show_errors(f.object, :login_email)
  .row
    = f.label :password          
    = f.password_field :login_password
    p.error= show_errors(f.object, :login_password)
  .row
    = f.submit 'ログインして確認へ進む', class: 'js-sign-up-btn'

What is the possible problem to cause these double requests?
I've searched a lot by stackoverflow and tried, but still can't solve the problem.

2 Answers

remote: true will automagically handle the Ajax request which means your form will be submitted using Ajax and the page won't reload. You should not trigger any other custom Ajax post request in your Javascript code.

If you want a callback to update when the ajax request returns a response you can do that by rendering a js view on the requested resource as shown in this example:

https://blog.codeship.com/unobtrusive-javascript-via-ajax-rails/

You are sending two request for submitting the form, one is when you write remote => true in the form it will make ajax request and again you are binding an ajax request for submitting the form, remove the remote => true from the form_for.

Related