Rails - Saving a new data from other module - ruby-on-rails

Question

I have Client model and Contact model. On the Client page, I put "Add to Contact" button to save it on the contact model.
I have this code on my client page:
= form_for(#contact, remote: true, html: { class: 'form-horizontal ajax-form add-to-contact', style: 'margin-bottom: 0;', 'data-model-name' => 'contact'}) do |f|
= f.text_field :type, :value => 'clients'
= f.text_field :client_id, :value => client.id
= f.submit "Add to Contact", class: 'btn btn-success btn-submit-add-to-contact'
clients_controler.rb
def index
#contact = Contact.new(params[:client_id], params[:type])
end
contacts_controller.rb
def create
#contact = Contact.new(contact_params)
respond_to do |format|
if #contact.save
format.js {}
else
format.json { render json: #contact.errors, status: :unprocessable_entity }
end
end
end
And I have coffeesript code that when I submit it, it will save to contact model:
$(document).on "click", ".btn-submit-add-to-contact", ->
$(this).prop "disabled", true
$(this).val "Added to Contacts!"
$(".add-to-contact").submit()
But there's a problem on saving. All of my clients save, as in they're looping and automatically saving although I'm not submitting other client. Please help.

Answer 1

You should remove remote: true if you are adding you own Ajax functionality.
Also you should prevent the default click action or the browser will submit the form twice.
$(document).on "click", ".btn-submit-add-to-contact", ->(e)
$(this).prop "disabled", true
$(this).val "Added to Contacts!"
$(".add-to-contact").submit()
e.preventDefault()
If you are using jquery-ujs you should listen for the completed ajax call instead:
$(document).ready ->
$("form").on("ajax:success", (e, data, status, xhr) ->

Answer 2

I got this.
I've modified my JS:
$(document).on "click", ".btn-submit-add-to-contact", ->
$(this).prop "disabled", true
$(this).val "Added to Contacts!"
contact_form = $(this).closest('.add-to-contact-form').find('.ajax-form')
contact_form.submit()
return
And I put class before my form:
.add-to-contact-form
= form_for(#contact, remote: true, html: { class: 'form-horizontal ajax-form add-to-contact', style: 'margin-bottom: 0;', 'data-model-name' => 'contact'}) do |f|
= f.text_field :type, :value => 'clients'
= f.text_field :client_id, :value => client.id
= f.submit "Add to Contact", class: 'btn btn-success btn-submit-add-to-contact'
I use .closest and it works fine to me.
Thanks for helping me!