How to send multiple form data using jquery form object?

Question

I have created FormData object from a form using jquery as bellow. and sending it to the controller side to FormCollection using ajax.

var form = $('#kycFormTab1').get(0);
var data = new FormData(form);

I want to send multiple form data to the ajax. How can i achieve it? How to append form data of the other form to 'data' object?

I want to access form data with name because i am using FormCollection object to the server side. and i am using single FormCollection object for all form.

First, you cannot combine formData. Second, I suspect you have multiple forms with same ID. — K K, Sep 07 '17 at 11:07
You cannot combine form data using the `FormData()` constructor. If you want to send data from multiple forms you'll need to `append()` it to the object manually. *However* it sounds like you should think about amending your HTML structure if you need to submit two forms at once. — Rory McCrossan, Sep 07 '17 at 11:09
Use `data: $(form1).serialize() + '&' + $(form2).serialize().` in an ajax call, or if you have file inputs and need to use `FormData`, then you need to `.append()` each name/value pair of the 2nd form to `data` (refer [this answer](http://stackoverflow.com/questions/29293637/how-to-append-whole-set-of-model-to-formdata-and-obtain-it-in-mvc/29293681#29293681) — , Sep 07 '17 at 12:54
But you should never be using `FormCollection` in mvc. Your method should have parameters for the model in your view. — , Sep 07 '17 at 12:59

score 0 · Answer 1 · answered Sep 07 '17 at 11:10

0

You can append as many data object as like by following this approach:

var formData = new FormData();

formData.append('form1', $('#kycFormTab1').get(0));
formData.append('form2', $('#kycFormTab2').get(0));

and so on.

answered Sep 07 '17 at 11:10

Mayank Pandeyz

25,704
4
40
59

using this i get `[object HTMLFormElement]` for each form in `FormCollection` How can i able to access formcollection value by name? – alka vaghela Sep 07 '17 at 11:34

score 0 · Answer 2 · answered Sep 07 '17 at 11:11

0

You can use serializeArray() for each form:

var form = $('form'); //Getting all forms 
$.each(form, function(i, formC) { 
      var formDates = $(formC).serializeArray();
      $.ajax({
          data: formDates,
          ...
      })
}

answered Sep 07 '17 at 11:11

SilverSurfer

4,281
6
24
50

How to send multiple form data using jquery form object?

2 Answers2