Submit form in rails 3 in an ajax way (with jQuery)

Question

I am a beginner in rails and jQuery. I have two separate forms in one page and I want to submit them separately in ajax way (with jQuery). This is how far I got. Can anybody add or fix this code to make it work. I am using Rails 3.1 and jQuery 1.6. Thank you in advance.

application.js

$(".savebutton").click(function() {      $('form').submit(function() {          $(this).serialize();     }); });  

first form:

<%=form_for :users do |f| %>   <fieldset>     <legend>Basic details</legend>     <%= f.label :school %>     <%= f.text_field :school,:size=>"45",:class=>"round",:id=>"school" %><br/>         </fieldset>   <p><%= button_to "save and continue",{:class=>"savebutton"} %></p> <%end%> 

second form:

<%=form_for :courses do |c| %>   <fieldset>     <legend>Your current classes</legend>     <label>class:</label><%= c.text_field :subject,:size=>"45",:class=>"round" %><br/>   </fieldset>   <p><%= button_to "save and continue",{:class=>"savebutton"} %></p> <%end%> 

SchoolController

class SchoolController < ApplicationController   respond_to :json   def create     @school = current_user.posts.build(params[:school].merge(:user => current_user))     if @school.save       respond_with @school     else       respond_with @school.errors, :status => :unprocessable_entity     end   end end 

CourseController is in the same shape as SchoolController

Answer 1

You want to:

1. Stop the normal behaviour of submit.
2. Send it through ajax to the server.
3. Get a reply back and change things accordingly.

The code below should do that:

$('form').submit(function() {       var valuesToSubmit = $(this).serialize();     $.ajax({         type: "POST",         url: $(this).attr('action'), //sumbits it to the given url of the form         data: valuesToSubmit,         dataType: "JSON" // you want a difference between normal and ajax-calls, and json is standard     }).success(function(json){         console.log("success", json);     });     return false; // prevents normal behaviour }); 

Answer 2

If you use :remote => true on your forms, you can submit them with JavaScript with

$('form#myForm').trigger('submit.rails');