javascript - How to save "add another" data in a form? -

i've got form. in form, user can fill out few fields, click "add". data gets turned html element, , form gets (partially) cleared can type more data.

i'm trying figure out how store data when clicks "add" can submitted later. should serialize (json? or there more compact representation--doesn't need human readable) , store in hidden field? if so, happens when adds 2nd object? deserialize old data, , reserialize 2 objects together? seems inefficient.

do somehow clone form, hide it, , update name attributes don't conflict, , kill myself trying parse these stupid things array later?

what's best approach?

create hidden field incremental numerical suffix somewhere in name.

var fields = $('input[type=hidden][name^=foo_]', form).length; $('<input type="hidden" name="foo_' + (fields + 1) + '">').val(val).appendto(form); 

submit usual way, jquery.serialize() , on.

finally intercept on accordingly in server side (semi-pseudo).

for (var = 0; < integer.max_value; i++) {     var value = request.getparameter("foo_" + i);     if (value == null) break;     // ... } 

note multiple hidden fields same name allowed, you're dependent on server side technology used whether gathered in same order request appeared in query string (the http/html spec mandates must appear in same order in http query string respective html input elements appeared in dom tree). far know, php , servlet correctly (i.e. values appear in same order in array of parameter values appeared in http query string).