Pattern for Managing IDs and Persisting User Input for an Entire HTML Table at once

Question

...meaning pattern in its general English usage, not specific to OO design patterns. Given a table like the following (using <% %> as generic server-side script tags):

<form action="someUri" method="post">
<table>
    <thead>
        <tr>
            <td>Widget ID</td>
            <td>Description</td>
            <td>Price</td>
        </tr>
    </thead>
    <tbody>
    <% foreach widget in widgets %>
        <tr>
            <td>
                <!-- input ids need to be mangled
                        to preserve uniqueness -->
                <input type="hidden" id="[Some_Mangled_Input_Id]" 
                    value="<%= widget.Id %>" />
                <%= widget.Id %>
            </td>
            <td>
                <!-- prefill if exists for widget -->
                <input type="text" id="[Some_Mangled_Input_Id]"
                    value="<%= widget.Description %>" />
            </td>
            <td>
                <!-- prefill if exists for widget -->
                <input type="text" id="[Some_Mangled_Input_Id]"
                    value="<%= widget.Price %>" />
            </td>
        </tr>
    <% end foreach %>
    </tbody>
</table>

<input type="submit" value="Save Changes" />
</form>

And on the server at post:

    var widgetIdKeys = all keys in forms collection matching
        pattern of mangled input Id for Widget.Id hidden input

    foreach widgetIdKey in widgetIdKeys

        find matching mangled input Id for Widget.Description text input

        find matching mangled input Id for Widget.Price text input

        if input changed per comparison to some original

            persist Description and Price input for current widget Id

        end if

    end foreach

This problem has no doubt been solved for a long time but this is the only approach I can think of and it seems hacky. So my question is: is there a better pattern and if so what does it look like? If this is the only or preferred way to do this, are there right and wrong ways to handle the input Id mangling and parsing? What about the comparison to identify which inputs have changed? I can think of ways to solve this on a per row or per cell level, and maybe those ways exist because there is no good way to solve it on a per table level, but I can also think of downsides to those ways.

Or am I missing the appropiate paradigm altogether? Thanks for any insights.

Answer 1

You might want to use name instead of id for your inputs.

http://www.mail-archive.com/[email protected]/msg27766.html

Name and ID serve two different purposes. ID is used to identify the element's node in the document. Name is used to identify the element's value in the form submission posted back to the server.

---

You could simplify things by using an arrays for your input names:

<% for (i=0; i<n; i++) { %>
<input type="hidden" name="id[i]" />
<input type="text" name="description[i]" />
<% } %>

Then on the backend the inputs would all be nicely arranged in arrays (at least in PHP).

More here.

Answer 2

For completeness (not trying to get my own bounty if that's even possible) here is how I ended up addressing the problem—not much different than the original approach, just more sane in large part due to willollers answer that put me on the right track.

Adding a row counter to the table above I modified the original input id/name pattern such that the incoming form submissions looked like this:

<input name="widgets[0].Id" />
<input name="widgets[0].Description" />
<input name="widgets[0].Price" />
<input name="widgets[1].Id" />
<input name="widgets[1].Description" />
<input name="widgets[1].Price" />
<input name="widgets[2].Id" />
<input name="widgets[2].Description" />
<input name="widgets[2].Price" />

And so on.

This is exactly what is prescribed by ASP.Net MVC as shown by Scott Hanselman here. ASP.Net MVC's default model binder will take it from there and automatically convert the submission to a strongly typed collection named widgets, but to keep to the point of the question as language/framework agnostic, I think the take-away is to use an input naming convention that can easily be parsed into a collection and focus on abstracting that step. From willoller's answer that task is handled nicely by PHP, and I would guess there are similar facilities in other platforms as well.