tags:

views:

60

answers:

3

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>
A: 

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.

Jasper De Bruijn
Code is added. Thx
koko
That might be a solution! How can I get the ID of the button with PHP?
koko
+1  A: 

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.

DrColossos
I really need a full page-reload... I've added some code, so you can (hopefully) see what I mean ;-)
koko
If you want a full page reload when you add a new collection of forms just add a hidden field to the "voeg extra items toe" button and wrap them around an <form> for each element. Or use a <form> around the whole site and determine the clicked button based on their name="youritem" that will be send to the server.
DrColossos
This can work ... Only when I put the form around each group of items and push the add button, I won't be able to save the items I've inserted. Just the items within the group I've posted.
koko
Then I would go with a form around the whole <table>/<whatever-you-are-using> and determine the clicked button based on it's name that is sent. So instead of "name="list_list:add" you could do "name=add_drinken"
DrColossos
A: 

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.

Wireblue
Ok, I now how to add extra fields, but how can I know that button is clicked while I can't give the different names (I do a select on the button name clicked to know what action happened), so I know where to add those extra fields? Thx!
koko
So just to clarify, you can't change the name attribute on the button but you want to know which of the buttons changed? Does the button have any name attribute set?
Wireblue
No indeed, the name can't be changed and is allready set (see code: list_list:add ).
koko
Ok, that's fine. Try changing the value for each button to "Add Additional Items to Eat", "Add Additional Items to Drink" etc, so that each button has it's own unique value. Then when your form is submitted, check the value of $_POST['list_list:add']. This will tell you which button was clicked.
Wireblue