How to add an array value to new FormData?

Question

On form submission I'm using jQuery to gather data including files and creating a FormData Object of the form values using:

var formData = new FormData($("form#formid")[0]);

but how can I add another value and it's key to this FormData Object?

@Esailija I need to get the contents of the form including FILES to post with ajax, didn't think serialize() could handle files? — Dan
– Dan, Commented Jun 26, 2012 at 13:39
I was confused because you said "array". I edited it to be what I think you are asking. — Esailija
– Esailija, Commented Jun 26, 2012 at 13:40

Esailija · Accepted Answer · 2012-06-26 13:39:23Z

22

var formData = new FormData($("form#formid")[0]);
formData.append("key", "value")

See https://developer.mozilla.org/en/XMLHttpRequest/FormData

answered Jun 26, 2012 at 13:39

Esailija

140k24 gold badges280 silver badges328 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Calvein · Accepted Answer · 2012-06-26 13:43:41Z

2

You can iterate over all the fields in the form and add them to the FormData quite easily this way :

var formData = new FormData();
$("form#edit-account").serializeArray().forEach(function(field) {
  formData.append(field.name, field.value)
});

answered Jun 26, 2012 at 13:43

Calvein

2,12113 silver badges28 bronze badges

Comments

Lucky · Accepted Answer · 2016-07-28 08:30:47Z

2

You can also use FormData.set().

The difference between FormData.set and append() is that if the specified key already exists, FormData.set will overwrite all existing values with the new one, whereas append() will append the new value onto the end of the existing set of values.

Syntax:

formData.set(name, value);

answered Jul 28, 2016 at 8:30

Lucky

17.4k20 gold badges121 silver badges156 bronze badges

Comments

Tony · Accepted Answer · 2014-10-28 12:59:24Z

1

$( 'form' ).submit(function ( e ) {
var data;

data = new FormData();
data.append( 'file', $( '#file' )[0].files[0] );

$.ajax({
    url: 'http://hacheck.tel.fer.hr/xml.pl',
    data: data,
    processData: false,
    type: 'POST',
    success: function ( data ) {
        alert( data );
    }
});

e.preventDefault();

});

answered Oct 28, 2014 at 12:59

Tony

914 bronze badges

Comments

Alex · Accepted Answer · 2016-05-06 10:24:22Z

1

var data = new FormData(),
    fields = $("#myForm").serializeArray();

$.each( fields, function( i, field ) {
    data.append(field.name, field.value);
});

answered May 6, 2016 at 10:24

Alex

1593 silver badges8 bronze badges

Collectives™ on Stack Overflow

How to add an array value to new FormData?

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related