Sending Javascript array data through a form submit

[csdude55]

I'm hoping you guys can suggest a way to make this work well.

I have a form on my site, which is submitted and processed via Perl.

I've also recently implemented a jQuery script that sends a list of results through a JavaScript function like this:

.on('complete', function (event, id, uploadName, responseJSON) {
 // blah blah blah
});

id is basically an autoincrement integer that I can easily turn in to an index for an array, then I need uploadName and responseJSON['uuid'] data.

I originally started sending it as a delimited string to a hidden input tag <input type="hidden">, like this:

0||image_0.jpg||image_0_uuid|:|1||image_1.jpg||image_1_uuid|:|

but when the user deletes something (which sends the id tag) it's not easy to remove it from that string.

I've thought about just keeping everything as a JavaScript array, and when the user clicks to process the form I could run an onSubmit function to convert the final array to a delimited string.

I also considered trying to generate a new hidden tag for each index; eg:

$('#form').append('<input type="hidden" name="uploadName_' + id + '" value="' + uploadName + '">');
$('#form').append('<input type="hidden" name="uuid_' + id + '" value="' + responseJSON['uuid'] + '">');

Is there a third option that's better? Or any other suggestions?

[NickMNS]

I would definitely add form fields on submit using JS/jQuery

 $("#form").submit( function(eventObj) {
  $('<input />').attr('type', 'hidden')
   .attr('name', "uploadName_" + id)
   .attr('value', uploadName)
   .appendTo('#form');
  $('<input />').attr('type', 'hidden')
   .attr('name', "uuid_" + id)
   .attr('value', responseJSON['uuid'])
   .appendTo('#form');
  return true;
 });

Answer borrowed from here:
[stackoverflow.com...]

However, I would caution you on dynamically assigning the field names eg:

 name="uploadName_' + id +'"

I would assign a static name such as "uploadName" and then append the +id to the value. It would probably make more sense to create a third field names "_id" and the assign "id" to the value. such that the form returns something like this:

{
 '_id':001,
 'uploadName': 'Some_Name',
 'uuid': Some_uuid'
}

[csdude55]

Cool, thanks Nick :-) Just curious, why do you suggest adding fields instead of keeping it all as a single delimited string?

[NickMNS]

why do you suggest adding fields instead of keeping it all as a single delimited string?

It is cleaner more readable and manageable.

[csdude55]

Good points. It's been awhile since I had to code like this, do I need to escape or replace characters like |, ", and ' manually or is that auto-corrected when they become variables?