Submitting array of textfields using FormData() through ajax

Question

I have an array of input text

<input type="text" name="highlight" value="1"/>
<input type="text" name="highlight" value="2"/>

I used ajax and FormData() to submit it to the server.

var form = $(this);
var formData = new FormData(form[0]);
var target = form.attr('action');

$.ajax({
      url: target,
      type: 'post',
      data: formData,
      processData: false,
      contentType: false,
    })
    .done(function(data){
        console.log(data.message);
    });

**Expected Server result:**highlight=['1','2']
**Actual Server result:**highlight=2
Im using nodejs as server

In both the inputs you need to the name attribute to show that it is an array like this: highlight[] — MrMadsen
– MrMadsen, Commented Sep 30, 2015 at 1:34
If the issue is on the node side check out this post: stackoverflow.com/questions/4586716/… — MrMadsen
– MrMadsen, Commented Sep 30, 2015 at 2:04

MrMadsen · Accepted Answer · 2015-09-30 01:40:09Z

1

You need to add brackets to your input name attributes highlight[]. This way the browser knows they are part of the same array and won't overwrite one with the other.

<input type="text" name="highlight[]" value="1"/>
<input type="text" name="highlight[]" value="2"/>

answered Sep 30, 2015 at 1:40

MrMadsen

3,0623 gold badges25 silver badges31 bronze badges

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

7 Comments

Terinah14 Over a year ago

I tried putting brackets but it will return undefined accessing highlight. It is working even if there is no bracket when I'm using serialize(). But for now I need to use FormData because I'm also uploading a file.

MrMadsen Over a year ago

On the server or the browser?

Terinah14 Over a year ago

In server. The result is highlight[]:2. It should be highlight:['1','2'] @MrMadsen

MrMadsen Over a year ago

Have you checked the post variables sent via the debugging tools in the browser? This will let you know if it is being sent as an array or not which I suspect it is being sent as an array and the error is actually on the node side. This post will tell you how to check the post variables: stackoverflow.com/questions/15603561/…

MrMadsen Over a year ago

From that it looks like both values are being sent but node isn't receiving them correctly. You could try adding the index into the bracket highlight[0] and highlight[1]. If that still doesn't work then change it back to serialize and look at the post variables being sent and compare them to the ones you just commented - that way you'll know what node is expecting.

|

Collectives™ on Stack Overflow

Submitting array of textfields using FormData() through ajax

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related