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">