Question

I’ve got a form. In this form, a user can fill out a few fields, then click “Add”. The data gets turned into an HTML element, and then the form gets (partially) cleared so that he can type some more data.

I’m trying to figure out how to store that data when he clicks “Add” so that it can be submitted later. Should I serialize (JSON? or is there a more compact representation–doesn’t need to be human readable) it and store it in a hidden field? If so, what happens when he adds a 2nd object? I deserialize the old data, and then reserialize the 2 objects together? Seems inefficient.

Do I somehow clone the form, hide it, and update all the name attributes so they don’t conflict, and then kill myself trying to parse these stupid things into an array later?

What’s the best approach?

Answer 1

Create a hidden field with an incremental numerical suffix somewhere in the name.

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

Submit it the usual way, jQuery.serialize() and so on.

Finally intercept on it accordingly in the server side (semi-pseudo).

for (var i = 0; i < Integer.MAX_VALUE; i++) {
    var value = request.getParameter("foo_" + i);
    if (value == null) break;
    // ...
}

Note that multiple hidden fields with the same name is also allowed, but you’re dependent on the server side technology used whether they will be gathered in the same order from the request as they appeared in the query string (the HTTP/HTML spec already mandates that they must appear in the same order in the HTTP query string as their respective HTML input elements appeared in the DOM tree). As far as I know, PHP and Servlet do this correctly (i.e. the values appear in the same order in the array of parameter values as they appeared in the HTTP query string).