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"/>&开发者_开发问答lt;/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>
I can't exactly figure out what your problem is but it looks like you could enhance the whole process with some AJAX/JavaScript functionallity.
When you click the button that is supposed to determine if you need additional fields, you can send an AJAX call to a server-side script and the answer from this script can trigger a function that will add whatever you need to the form, including proper names that either follow certain rules (like name_1, name_2, ..., name_n) or can be calculated from the server-side script and send back to your form.
For tricky scenarios where you're adding new rows, but want specific names I use this convention "btn_name_1", "btn_name_2" etc. When your form has been posted you can split apart the field/button name using regex or substr (or similar) in PHP and find which button was clicked ("btn_name"), and in which row ("1"). This way each input field can have it's own unique name while still keeping it's function and purpose clear.
Here's some PHP which will help with splitting up names and numbers on buttons/fields using the above naming scheme...
// Loop through POST Variables
foreach ($_POST as $key => $value) {
if (substr($key, 0, 8) == 'btn_name') {
// "btn_name" was clicked, which ID?
$id = (int)substr($key, 8);
}
}
EDIT: After seeing your code it all makes sense! Just name your fields like this "eat_name_1", "eat_number_1" (for row one), "eat_name_2", "eat_number_2" (for row two) etc. And for the other items try "drink_name_1", "drink_number_1" (row one), "drink_name_2", "drink_number_2" (row two) etc. Use the PHP code above to split all the random fields into name/value pairs. Adding new rows is easy, just increment the number on the end.
If you provide some code, it's probably easier to see your problem.
Anyway, when you can't use or change the name for the inputs, you can always give each of them a unique id, and use that. If that is also a problem you could store some arbitrary data in the class attribute.
精彩评论