"Add another item" form functionality
- by GSTAR
I have a form that lets a user enter their career history - it's a very simple form with only 3 fields - type (dropdown), details (textfield) and year (dropdown).
Basically I want to include some dynamic functionality whereby the user can enter multiple items on the same page and then submit them all in one go. I had a search on Google and found some examples but they were all based on tables - my markup is based on DIV tags:
<div class="form-fields">
<div class="row">
<label for="type">Type</label>
<select id="type" name="type">
<option value="Work">Work</option>
</select>
</div>
<div class="row">
<label for="details">Details</label>
<input id="details" type="text" name="details" />
</div>
<div class="row">
<label for="year">Year</label>
<select id="year" name="year">
<option value="2010">2010</option>
</select>
</div>
</div>
So basically the 3 DIV tags with class "row" need to be duplicated, or to simplify things - the div "form-fields" could just be duplicated. I am also aware that the input names would have to converted to array format.
Additionally each item will require a "remove" button. There will be a main submit button at the bottom which submits all the data.
Anyone got an elegant solution for this?
