CODEWITHSUNDEEP
php
user3393658
user3393658

Reputation: 23

Add more fields in a PHP form and submit

I have created a php page where the customers can enter the details of computer components they are turning in to the department. There name, department, email, phone, comments and list of details they enter about each component like Model, Tag number and Item Description.

One Customer can return any number of components at single time. As of now my page takes 3 component details at one time, So I want to place a "add more" button so that the customer can click on add more button each time he has more and more components to enter. 

        <td width="33%"><label class="description" for="email">Manufacturer, Model, Serial # <br />
        </label>
        <p class="guidelines" id="guide_2"><small>Please add some details for larger items such as "Dell Precision 5550 Serial number 123456789".</small></p> </td>
        <td width="33%"><label class="description" for="element_10">Tag Number (If Any) <br/></label>
        <div>
  <p class="guidelines" id="guide_9"><small>If the item has an Tag Number, please include it here.</small></p> </div> </td>
        <td width="33%"><label class="description" for="element_4">Item Description </label>
    <div>
      <p class="guidelines" id="guide_9"><small>You can group smaller items together and list them as "Box of 20 Mice".</small></p>
      </div></td>
      </tr>

      <tr>
        <td width="33%"><input id="element_5" name="1model" class="element text large" type="text" maxlength="255" value=""/></td>
        <td width="33%"><input id="element_10" name="1tag" class="element text large" type="text" maxlength="255" value=""/></td>
        <td width="33%"><input name="1descrip" type="text" class="element text large" id="element_6" value="" /></td>
      </tr>
      <tr>
        <td width="33%"><input id="element_7" name="2model" class="element text large" type="text" maxlength="255" value=""/></td>
        <td width="33%"><input id="element_8" name="2tag" class="element text large" type="text" maxlength="255" value=""/></td>
        <td width="33%"><input name="2descrip" type="text" class="element text large" id="element_9" value="" /></td>
      </tr>
      <tr>
        <td width="33%"><input id="element_11" name="3model" class="element text large" type="text" maxlength="255" value=""/></td>
        <td width="33%"><input id="element_12" name="3tag" class="element text large" type="text" maxlength="255" value=""/></td>
        <td width="33%"><input name="3descrip" type="text" class="element text large" id="element_13" value="" /></td>
      </tr>

Upvotes: 0

Views: 68

Answers (1)

Mike Brant
Mike Brant

Reputation: 71384

So you are demonstrating a very common anti-pattern when it comes to input naming. You should never name similar inputs like model1, model2, etc. (note that you should not have numbers first in the name in any case). Anything where you are incrementing a number value in the input name should be seen as a red flag.

What you want to be doing is using array access notation in your naming. So name your inputs like this:

<!-- First set -->
<input name="tag[]" ... />
<input name="descrip[]" ... />
<input name="model[]" ... />

<!-- Second and all future sets exactly the same -->
<input name="tag[]" ... />
<input name="descrip[]" ... />
<input name="model[]" ... />

When your form posts to PHP, PHP will automatically assemble all commonly named inputs with [] into an array for you. So, for example if you did var_dump($_POST['tag']);, you might see something like:

Array(
    0 => "tag 0 value",
    1 => "tag 1 value",
    ...
)

This makes it extremely easy to iterate over your POSTed data.

For "Add more" you then simply need to use javascript to possibly clone an existing row of your table (or clone a hidden "template" row) and attach the row in into the appropriate DOM location for your table.

Upvotes: 2

Related Questions