I have a wizard with 4 steps and in one of the steps, you can add items. By default, there are 3 time 5 empty input-fields listed. When you click a button, there have to be added some more. The 3 times 5 fields are added by a loop.
How can I determine where I have to add some fields (in the first 5 field of the second or the third). I can't use another name for every button, because sometimes there can be more then 3 groups of 5 fields. In my code (PHP), I use the name of the button to know what happened in the form, so the name can't be different for the button in every group ...
Further, the whole step is 1 form, so the post can't go to another script ... The value of the button has to be the same for every group.
I've been thinking on possible solutions and these came up:
On click a javascript adds a value to the post (in a hidden field?) But is this posted with the form?
Could it be possible to get the ID of the clicked button? This might be different :-)
I need a refresh after the click, so pure javascript isn't a solution either ...
It is a very specific question, but I hope someone can give me some direction.
Here is the code I'm talking about:
<h3><label class="list_list:table_title">Eten</label></h3>
<table id="eten">
<thead>
<tr>
<th>Naam item</th>
<th>Aantal</th>
</tr>
</thead>
<tbody>
<tr>
<td class="item"><input type="
text" name="item_1_1" value="" class="inputText" maxlength="64" size="46" tabindex="11"/></td>
<td class="amount"><input type="
text" name="amount_1_1" value="" class="inputText" maxlength="64" size="10" tabindex="11"/></td>
</tr>
<tr>
<td class="item"><input type="
text" name="item_1_2" value="" class="inputText" maxlength="64" size="46" tabindex="12"/></td>
<td class="amount"><input type="
text" name="amount_1_2" value="" class="inputText" maxlength="64" size="10" tabindex="12"/></td>
</tr>
<tr>
<td class="item"><input type="
text" name="item_1_3" value="" class="inputText" maxlength="64" size="46" tabindex="13"/></td>
<td class="amount"><input type="
text" name="amount_1_3" value="" class="inputText" maxlength="64" size="10" tabindex="13"/></td>
</tr>
<tr>
<td class="item"><input type="
text" name="item_1_4" value="" class="inputText" maxlength="64" size="46" tabindex="14"/></td>
<td class="amount"><input type="
text" name="amount_1_4" value="" class="inputText" maxlength="64" size="10" tabindex="14"/></td>
</tr>
<tr>
<td class="item"><input type="
text" name="item_1_5" value="" class="inputText" maxlength="64" size="46" tabindex="15"/></td>
<td class="amount"><input type="
text" name="amount_1_5" value="" class="inputText" maxlength="64" size="10" tabindex="15"/></td>
</tr>
</tbody>
</table>
<input id="list_list:add" type="submit" name="list_list:add" value="voeg extra items toe" class="add" />
<div class="spacer"></div>
<h3><label class="list_list:table_title">Drinken</label></h3>
<table id="drinken">
<thead>
<tr>
<th>Naam item</th>
<th>Aantal</th>
</tr>
</thead>
<tbody>
<tr>
<td class="item"><input type="
text" name="item_2_1" value="" class="inputText" maxlength="64" size="46" tabindex="21"/></td>
<td class="amount"><input type="
text" name="amount_2_1" value="" class="inputText" maxlength="64" size="10" tabindex="21"/></td>
</tr>
<tr>
<td class="item"><input type="
text" name="item_2_2" value="" class="inputText" maxlength="64" size="46" tabindex="22"/></td>
<td class="amount"><input type="
text" name="amount_2_2" value="" class="inputText" maxlength="64" size="10" tabindex="22"/></td>
</tr>
<tr>
<td class="item"><input type="
text" name="item_2_3" value="" class="inputText" maxlength="64" size="46" tabindex="23"/></td>
<td class="amount"><input type="
text" name="amount_2_3" value="" class="inputText" maxlength="64" size="10" tabindex="23"/></td>
</tr>
<tr>
<td class="item"><input type="
text" name="item_2_4" value="" class="inputText" maxlength="64" size="46" tabindex="24"/></td>
<td class="amount"><input type="
text" name="amount_2_4" value="" class="inputText" maxlength="64" size="10" tabindex="24"/></td>
</tr>
<tr>
<td class="item"><input type="
text" name="item_2_5" value="" class="inputText" maxlength="64" size="46" tabindex="25"/></td>
<td class="amount"><input type="
text" name="amount_2_5" value="" class="inputText" maxlength="64" size="10" tabindex="25"/></td>
</tr>
</tbody>
</table>
<input id="list_list:add" type="submit" name="list_list:add" value="voeg extra items toe" class="add" />
<div class="spacer"></div>
<h3><label class="list_list:table_title">Varia</label></h3>
<table id="varia">
<thead>
<tr>
<th>Naam item</th>
<th>Aantal</th>
</tr>
</thead>
<tbody>
<tr>
<td class="item"><input type="
text" name="item_3_1" value="" class="inputText" maxlength="64" size="46" tabindex="31"/></td>
<td class="amount"><input type="
text" name="amount_3_1" value="" class="inputText" maxlength="64" size="10" tabindex="31"/></td>
</tr>
<tr>
<td class="item"><input type="
text" name="item_3_2" value="" class="inputText" maxlength="64" size="46" tabindex="32"/></td>
<td class="amount"><input type="
text" name="amount_3_2" value="" class="inputText" maxlength="64" size="10" tabindex="32"/></td>
</tr>
<tr>
<td class="item"><input type="
text" name="item_3_3" value="" class="inputText" maxlength="64" size="46" tabindex="33"/></td>
<td class="amount"><input type="
text" name="amount_3_3" value="" class="inputText" maxlength="64" size="10" tabindex="33"/></td>
</tr>
<tr>
<td class="item"><input type="
text" name="item_3_4" value="" class="inputText" maxlength="64" size="46" tabindex="34"/></td>
<td class="amount"><input type="
text" name="amount_3_4" value="" class="inputText" maxlength="64" size="10" tabindex="34"/></td>
</tr>
<tr>
<td class="item"><input type="
text" name="item_3_5" value="" class="inputText" maxlength="64" size="46" tabindex="35"/></td>
<td class="amount"><input type="
text" name="amount_3_5" value="" class="inputText" maxlength="64" size="10" tabindex="35"/></td>
</tr>
</tbody>
</table>
<input id="list_list:add" type="submit" name="list_list:add" value="voeg extra items toe" class="add" />
<div class="spacer"></div>
</div>
<div id="formButtons">
<input id="list_info:back" type="submit" name="list_info:back" value="<< Terug" tabindex="11" class="back" />
<input id="list_info:next" type="submit" name="list_info:next" value="Volgende >>" tabindex="12" class="next" />
<input id="list_info:options" type="submit" name="list_info:options" value="Opties" tabindex="13" class="options" />
<input id="list_info:finish" type="submit" name="list_info:finish" value="Voltooien" tabindex="14" disabled="disabled" class="finish" />
</div>
