Related Parameters in HTML

Question

I have a table of rows and columns on an HTML-based entry form that allows the user to edit multiple records. Each row corresponds to a database record and each column to a database field.

When the user submits the form, the server needs to figure out which request parameter belongs to which row. The method I've been using for years is to prefix or suffix each HTML input element's name to indicate the row it belongs to. For example, all input elements would have the suffix "row1" so that the server would know that request parameters whose names end with "row1" are field values for the first row.

While this works, one caveat of the suffix/prefix approach is that you're adding a constraint that you can't name any other elements with a particular suffix/prefix. So I wonder if there's a better, more elegant approach. I'm using JSP for the presentation layer, by the way.

Thanks.

Answer 1

When browsers POST that information back to the server, it is just a list of parameters:

?name_row1=Jeff&browser_row1=Chrome&name_row2=Mark&browser_row2=IE8

So really, I think you can answer a simpler question: how do you relate keys in a key-value list?

Alternatively, you can go to a more structured delivery method (JSON or XML), which will automatically give you a structured data format. Of course, this means you'll need to build this value on the browser first, then send it via AJAX (or via the value of a hidden input field) and then unpack/deserialize it in the server code.

XML:

<rows>
<row><id>1</id><name>Jeff</name><browser>Chrome</browser></row>
<row>...</row>
</rows>

or JSON:

[{ "name":"Jeff", "browser":"Chrome"}, { "name":"Mark", "browser":"IE8" }]

There are many resources/tutorials on how to do this... Google it. Or go with the ostensible StackOverflow consensus and try jQuery.

Answer 2

Current user agents send back the values in the order of the fields as presented to the user.

This means that you could (theoretically) drop the prefix/suffix altogether and sort it out based on the ordering of the values. You'd get something like

/?name=Tom&gender=M&name=Jane&gender=F&name=Roger&gender=M

I don't know how your framework returns that, but many return it as lists of each value

name = [Tom, Jane, Roger]
gender = [M, F, M]

If you pop an element off of each list, you should get a related set that you can work with.

The downside to this is that it relies on a standard behavior which is not actually required by the specification. Still... it's a convenient solution with a behavior that won't be problematic in practice.

Answer 3

I don't know JSP very well, but in PHP you would define your input fields' names with an array syntax.

<input name='person[]'>
<input name='person[]'>
<input name='person[]'>

When PHP receives a form like that, it gives you an array (within the standard $_POST array), thus:

$_POST['person']=array('alice','bob','charlie');

Which makes it very easy to deal with having as many sets of fields as you want.

You can also explicitly name the array elements:

<input name='person[teamleader]'>
<input name='person[developer1]'>

would give you an array with those keys. If your current prefixes are meaningful beyond simply numbering the records, this would solve that problem.

I don't know whether the identical syntax would work for JSP, but I imagine it would allow something very similar.

Hope that helps.