Question

I am having serious trouble with trying to get all the forms on a page to submit at once. Each of the forms (there could be anywhere from 1 to 100) are generated using partial views with mvc3. Each of the forms are generated using the @using (Ajax.BeginForm…. On the general ‘save’ button event handler in JS I have this code:

    var formsCollection = document.getElementsByTagName("form");

                for (var i = 0; i < formsCollection.length; i++) {

                    formsCollection[i].submit();
                }

Now, the mystifying and troubling part is that as written it only saves the last form in the last to the database. Yet, when I put an alert in that loop, both get saved!

To further complicate matters when I click the general ‘save’ button the browser jumps to a blank page. Now, I do have ‘return new EmptyResult()’ in the controller that handles the forms, but if I click the individual save buttons in the forms, it does not go to the blank page.

Any pointers in the right direction would greatly be appreciated.

Answer 1

Because you have a race condition. You are submitting two things at once, only one of them can actually make it.

You need to rethink your design.