jQuery Ajax POST response - knowing which form submitted?

Question

Supposing I had a multi-form page such as:

<form id="A" class="jaxy" ... />
<form id="B" class="jaxy" ... />
<form id="C" class="jaxy" ... />

Then I have some JQuery

$('.jaxy').live('submit', function() {
  $(this).startLoadingSpinner;
  $.post(this.action, $(this).serialize(), $(this).stopLoadingSpinner, "script");
  return false;
});

When a "jaxy" form is submitted there's an Ajax post request and the server might respond with some script like the following:

// The code I wish I had...
// If there was an error with the form it might respond...
$(whichever_form_posted).replaceWith("<form id="B" class="jaxy" .../>")
// or if everything went well it might...
$(whichever_form_posted).empty();
alert("Everything is right with the world! Give yourself a pat on the back.");

The trouble I'm obviously having is knowing which form submitted the post request in the first place. The way is see it I have 3 possible routes:

1. I could potentially send a DOM selector in the POST params? or
2. I could request a HTML response and insert the response data BUT as shown above I might not want to replace so this isn't really an option for me.
3. My preference somehow create a $.fn.function prototype in the response that could be called on the submitting element. This would have to be carefully scoped or unique so that any subsequent form submissions didn't redefine the function.

I'm really struggling to see a way around this and I would appreciate any thoughts on this. It's not necessarily relevant but I'm using this in a RoR environment and the POST request is a .js response to a RESTful controller action. More of a jQuery question that a RoR one I guess.

Kind regards,

Kevin.

Answer 1

You've not mentioned what appears to be the most obvious technique: a hidden field.

<input type="hidden" name="form_id" value="foo">

Answer 2

Hopefully i understand your problem correctly. What you want to know is which form is actually submitting the data. Here is my code suggestion :

$('.jaxy').live('submit', function() {
  // get the id of the form that makes this request
  var form_id = $(this).attr('id');

  $(this).startLoadingSpinner;

  $.post(this.action, $(this).serialize(), function(data){ 
        alert(form_id); 
    }, "script");

  return false;
});