Explore our sites

Stack Exchange
tour help careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 2 down vote favorite
1

I have created a simple PHP form that appends a field by calling a javascript function, every time a user clicks on a "Add" button.

The form code:

<form name="academicForm" method="post" action="send.php">
  <script src="addInput.js" language="Javascript" type="text/javascript"></script>
  <tr>
    <td align="center" valign="middle">
      <div id="dynamicInput"> 
        <span id="dynamicInput">Entry #1</span><br />

          <input type="text" name="myInputs[]"/>
          <select name="formGender[]">
            <option value="">Choose one...</option>
            <option value="First">first</option>
            <option value="Second">second</option>
            <option value="Third">third</option>
          </select> <br>
          <input type="submit" value="Submit">

          <input type="button" value="Add fields" onclick="addInput('dynamicInput');"/>
              </div>
    </td> 
  </tr>
</table>
</form>

The javascript code:

var counter = 1;
function addInput(divName){
          var newdiv = document.createElement('div');
          newdiv.innerHTML = "Entry #" + (counter + 1) + "<br><input type='text' name='myInputs[]'> <select name='formGender[]'> <option value=''>Chose one...</option><option value='First'>first</option><option value='Second'>second</option><option value='Third'>third</option></select>";
         newdiv.setAttribute('id', divName);
         document.getElementById(divName).appendChild(newdiv);


          counter++;
     }
}

Then, when one press the Submit button is directed to the send.php where the $_POST variables used in the form are to be parsed:

$myInputs = $_POST["myInputs"];
$formGender = $_POST["formGender"];

foreach ($myInputs as $eachInput) {
    $output .=  $eachInput . "\n";
}

foreach ($formGender as $eachInput2) {
    $output .=  $eachInput2 . "\n";
}

Then, anytime i run this, only the results of the first form entries are printed. All the data inserted in the form fields generated by the Javascript, despite the fact that are directed to the same variables, are not there.

Can anyone help me on this?

Update

Both the Javascript and PHP code have been changed in order to solve the Repeated ID's and the "add" position:

Javascript:

newdiv.setAttribute('id', divName+counter);
document.getElementById(divName).appendChild(newdiv);

PHP:

<form name="academicForm" method="post" action="send.php">
  <script src="addInput.js" language="Javascript" type="text/javascript"></script>
  <tr>
    <td align="center" valign="middle">
      <div id="dynamicInputForm"> 

<input type="button" value="Add fields" onclick="addInput('dynamicInput');"/>

        <span id="dynamicInput">Entry #1</span><br />

          <input type="text" name="myInputs[]"/>
          <select name="formGender[]">
            <option value="">Choose one...</option>
            <option value="First">first</option>
            <option value="Second">second</option>
            <option value="Third">third</option>
          </select> <br>
          <input type="submit" value="Submit">

              </div>
    </td> 
  </tr>
</table>
</form>

And here's the result of adding 3 new elements to the form, as seen in Chrome Inspector:

<div id="dynamicInputForm"> 

                    <input type="button" value="Add" onclick="addInput('dynamicInputForm');">
                          <br>
                          <br>

        <span id="dynamicInput">Entry #1</span><br>
          <input type="text" name="myInputs[]">
          <select name="formGender[]">
                <option value="">Choose one...</option>
                <option value="First">first</option>
                <option value="Second">second</option>
                <option value="Third">third</option>
              </select>
          </select> <br>


    <div id="dynamicInputForm1"> /*HTML code above*/ </div>
    <div id="dynamicInputForm2"> /*HTML code above*/</div>
    <div id="dynamicInputForm3">/*HTML code above*/</div>
</div>

<input type="submit" value="Submit">

The result of print_r($_POST);

Array ([myInputs] => Array ( [0] => firstEntry ) [formGender] => Array ( [0] => Third )

Thanks in advance!

share|improve this question
 
add print_r($_POST); ar the top of the php script to see the values returned. –  Dagon Sep 18 '12 at 19:48
2  
Don't use the same id for multiple elements, ids are suppose to be unique. –  Musa Sep 18 '12 at 19:49
 
Add to what Musa said, you appear to be adding a div with the ID of dynamicInput every time. –  j08691 Sep 18 '12 at 19:51
 
I've done all the corrections you stated and i keep only receiving the data of the form not generated by the Javascript "add". I've updated the code on my post. Thank you in advance –  Tallis Sep 18 '12 at 20:49
add comment

2 Answers

up vote 1 down vote

For one thing, you have two elements with the same ID. ID's MUST be unique. Secondly, you are adding the new input elements to the end of the div container, rather than inside your form. I believe this is where your issue lies. Try to add them above your submit button.

share|improve this answer
 
To add to what Revent is saying - can you try the javascript and then take a look at it in Firebug or Chrome's inspector? This will allow you to see if it falls within the form as expected. Also sharing the $_POST output will help. –  David Grenier Sep 18 '12 at 20:06
 
I've corrected both the repeated id's and the position of the new input elements and keeps happening the same. Only the data inserted on the form not generated by the Javascript "add" button are appended to the $_POST Variables. Will edit the main post with the corrections in a minute –  Tallis Sep 18 '12 at 20:35
add comment
up vote 0 down vote

inside your code, you are using same Id for multiple elements

var counter = 1;
function addInput(divName){
          var newdiv = document.createElement('div');
          newdiv.innerHTML = "Entry #" + (counter + 1) + "<br><input type='text' name='myInputs[]'> <select name='formGender[]'> <option value=''>Chose one...</option><option value='First'>first</option><option value='Second'>second</option><option value='Third'>third</option></select>";

        /// newdiv.setAttribute('id', divName); //*** Element with id 'dynamicInput' already exist in the dom.
         document.getElementById(divName).appendChild(newdiv);


          counter++;
     }
}
share|improve this answer
 
i've corrected that and it still does not work. I've updated the post with the new code and more information –  Tallis Sep 18 '12 at 22:18
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.