Hi everybody.
I've got a form where users can insert ingredients (name, quantity)
for recipes. as they need more couples to store all the ingredients,
they use the "add ingredient" link to obtain another couple of input
fields. Here comes the problem: I need to increment the value of the
hidden input field which precedes the two visible input fields.
I kwon there is a clone function in jquery but it makes the exact
copy. How can I use clone and modify the given html?
Here's the code:
Starting form...
<form action="insertIngredients.php" method="post">
<!-- first ingredient -->
<input type="hidden" name="ingr_num[]" value="1" />
<label for="ingr_name">Name</label><br />
<input type="text" name="ingr_name[]" /><br />
<label for="ingr_qty">Qty</label><br />
<input type="text" name="ingr_qty[]" /><br />
<input class="submit" type="submit" value="Insert
Ingredients" />
</form>
I want to obtain this...
<form action="insertIngredients.php" method="post">
<!-- first ingredient -->
<input type="hidden" name="ingr_num[]" value="1" />
<label for="ingr_name">Name</label><br />
<input type="text" name="ingr_name[]" /><br />
<label for="ingr_qty">Qty</label><br />
<input type="text" name="ingr_qty[]" /><br />
<!-- second ingredient -->
<input type="hidden" name="ingr_num[]" value="2" />
<label for="ingr_name">Name</label><br />
<input type="text" name="ingr_name[]" /><br />
<label for="ingr_qty">Qty</label><br />
<input type="text" name="ingr_qty[]" /><br />
<!-- third ingredient -->
<input type="hidden" name="ingr_num[]" value="3" />
<label for="ingr_name">Name</label><br />
<input type="text" name="ingr_name[]" /><br />
<label for="ingr_qty">Qty</label><br />
<input type="text" name="ingr_qty[]" /><br />
<input class="submit" type="submit" value="Insert
Ingredients" />
</form>
Any suggestion would be appreciated.
Thanks.
