Adding HTML fields so that when they get submitted back to the server in an array format is easy, but what about when you want to group multiple fields together to make up a single entry? Most of the time, that’s when things get a bit tricky. In order for the array fields to be related to each other as one record, you often end up having to place an ID or an incremented number in the array somewhere, usually something like this:
<p> Caption: <input type="text" name="images[0][name]" size="20" /> Image: <input type="file" name="images[0][url]" /> </p> <p> Caption: <input type="text" name="images[1][name]" size="20" /> Image: <input type="file" name="images[1][url]" /> </p>
This is an okay solution for form elements that are not likely to change, but this method quickly gets very complex when adding additional form elements dynamically to the DOM through javascript. You can’t just copy the HTML code with javascript anymore - you have to increment the number in order to keep those new fields together when they are submitted to the server. The end result most of the time looks ugly and hackish. So what if we could simplify everything by submitting the fields together in a straightforward way that will cut all that number incrementing out? Read More