vanstee Posted July 12, 2008 Share Posted July 12, 2008 I have a basic form with 3 input boxes per person and I also have a simple script set up to allow the user to add or remove people as needed. After inputting the necessary amount of people the user will then submit the form and the information will be processed by the post.php page and input in the database. The problem is that when another person is added their inputs are named the same as the previous person so when you try to access all of the information later with $_POST the values are overwritten. I know I could change my script to change the names of the new inputs by adding a number on the end but I thought maybe there was a more intuitive way to go about it. Just let me know how you would solve the problem. Any input is greatly appreciated. Thanks. <html> <head> <title></title> <script type="text/javascript"> var numPeople = 0; function addPerson() { var person = document.getElementById("person" + numPeople); var form = person.parentNode; var submit = document.getElementById("submit"); var clone = person.cloneNode(true); numPeople++; clone.id = "person" + numPeople; form.insertBefore(clone, submit); } function removePerson() { if(numPeople > 0) { var person = document.getElementById("person" + numPeople); var form = person.parentNode; form.removeChild(person); numPeople--; } } </script> </head> <body> <form action="post.php" method="post"> <table id="person0"> <tr> <td>Name:<input type="text" name="name" value=""/></td> <td>Email:<input type="text" name="email" value=""/></td> <td>Phone Number:<input type="text" name="phone" value=""/></td> </tr> </table> <input type="submit" name="addPeople" value="Save" id="submit"><br /> <a href="#" onclick="addPerson()">Add Person</a> <a href="#" onclick="removePerson()">Remove Person</a> </form> </body> </html> Quote Link to comment Share on other sites More sharing options...
rhodesa Posted July 12, 2008 Share Posted July 12, 2008 don't clone the node. just add a new row. also, for the input names, add [] to the end of them. <html> <head> <title></title> <script type="text/javascript"> function addPerson() { var tbody = document.getElementById('people'); tbody.innerHTML += '<tr>' + '<td><input type="text" name="name[]" value=""/></td>' + '<td><input type="text" name="email[]" value=""/></td>' + '<td><input type="text" name="phone[]" value=""/></td>' + '</tr>'; } function removePerson() { var tbody = document.getElementById('people'); if(tbody.rows.length){ tbody.removeChild(tbody.rows[tbody.rows.length - 1]); } } </script> </head> <body> <form action="post.php" method="post"> <table id="person"> <thead> <tr> <th>Name</th> <th>Email</th> <th>Phone</th> </tr> </thead> <tbody id="people"> <tr> <td><input type="text" name="name[]" value=""/></td> <td><input type="text" name="email[]" value=""/></td> <td><input type="text" name="phone[]" value=""/></td> </tr> </table> </table> <input type="submit" name="addPeople" value="Save" id="submit"><br /> <a href="#" onclick="addPerson();return false;">Add Person</a> <a href="#" onclick="removePerson();return false;">Remove Person</a> </form> </body> </html> try that code out, and on post.php, do a print_r($_POST). it should be pretty self explanatory on how to loop over the data, but let me kow if it's not. Quote Link to comment Share on other sites More sharing options...
vanstee Posted July 13, 2008 Author Share Posted July 13, 2008 Thanks that exactly what I needed. Quote Link to comment Share on other sites More sharing options...
vanstee Posted July 13, 2008 Author Share Posted July 13, 2008 Quick question. Why did you add return false to the onclick values? Is that just good practice? Quote Link to comment Share on other sites More sharing options...
rhodesa Posted July 13, 2008 Share Posted July 13, 2008 it keeps the <a> tag from doing it's default function, which is going to page specified in href. Since you have a # there, if you don't return false, it will only add a # to the URL of the page (no big deal). But, you will notice once that # is in the URL, you have to click the back button twice to go to the previous page. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.