Question

I have some code as such to submit multiple forms on my page at once:

$('.photo-edit-form form').ajaxSubmit({
     success: function() { console.log('success'); },
     error: function() { console.log('error'); }
});

However, no matter how many forms I have, I only ever get one success print out. I’ve found that I can fix it by using .each on the selected forms like so:

$('.photo-edit-form form').each(function() {
     $(this).ajaxSubmit({
          success: function() { console.log('success'); },
          error: function() { console.log('error'); }
     });
});

Is this a problem with the ajaxForm plugin or is this a misunderstanding on my part about how jQuery works? Any input would be greatly appreciated.

Answer 1

The code for the plugin acts like it handles any number at once, but it basically comes down to this:

$.ajax(options);

And the data in that option set comes from .formToArray() which only deals with the first element in the set:

var form = this[0];

So for your question, yes, this is a problem with the plugin, .ajaxSubmit() only works on a single <form> at a time, it doesn’t have a .each() internally like most plugins would.