blog.sanium.net

There are times when you wish to have a single valued form field pass multiple values. For example, maybe you want a radio button to pass in a height and a width value at the same time. It wouldn’t be too hard to just pass in a comma separated list of values in predefined order and then parse them in the backend, but that would be very error prone and not too elegant. Another approach is to use something similar to the http GET request where you use parameter1=value1¶meter2=value2 style and then extract the values in the backend. This approach also involves some ugly string manipulation.

Here’s an example from work:

The existing application passes in a customer_order_id to the backend which is specific to a customer. We wish to extend it to also handle generic orders which are identified as order_id. How do we identify if the value passed in is a customer_order_id or an order_id? Having already rejected the two possible solutions that I’ve outlined above, I thought about perhaps having negative / positive numbers to distinguish between the two, but that’s way too hacker-ish.

The solution I arrived at involves using multiple hidden fields and referencing them from the single valued for object:

<form>
<ol>
    <li><input type=”radio” value=”1”> value 1
  <input type=”hidden” value=” order_id-1” value=”generic-order-1”>
</li>
    <li><input type=”radio” value=”2”></input> value 2
  <input type=”hidden” value=”order_id-2” value=”generic-order-2”>
  <input type=”hidden” value=”customer_order_id-2” value=”customer-order-2”>
</li>
    <li><input type=”radio” value=”3”></input> value 3
  <input type=”hidden” value=”customer_order_id-3” value=”customer-order-3”>
</li>
</ol>
</form>

Then, in the backend, I only have to check the corresponding hidden field for the value.