jQuery Forum

In an ASP.NET MVC 4 application, I have two forms, form A and form B.

Form A contains an input type=file control that allows a user to select an image file. Because it is uploading a file, it must be of enctype="multipart/form-data" and data-ajax must be set to "false" (because ajax will not handle uploading files).

Form B is a regular field type form that uses ajax. This form has validation on it, so that fields are validated on submit and if any field is invalid, then the form is redisplayed so the user can correct the fields.

The sequence of events in the application is that users first visit form A to select an image to upload and then visit form B to enter metadata field information associated with the image. Once the user submits form A, they are redirected to form B with a redirectToAction() command.

The problem I have been experiencing is that the data-ajax="false" directive on the first form is causing the following issue with the second form: For the second form, I can submit the form once and everything works fine, but on subsequent submits, the data from the first submit is all I see in the controller.

I verified this issue is being caused by the data-ajax="false" in the first form, as follows: If I set data-ajax="true" in the first form, then I can submit the second form as many times as I want to and each time it submits correct data. Also, if I bypass the first form entirely and go straight to the second form, I can submit as many times as I want to correctly. But, if I submit the first form with data-ajax="false" and the second form with data-ajax="true", then the issue presents itself.

I also noticed that if I set data-ajax="false" on the second form also, that it works correctly, but doing this causes other problems later in the application.

Somehow the fact that I have submitted the first form with ajax off interferes with the submission of the second form after the first submit and I have absolutely no idea why it is happening.