CurtHolland Posted October 22, 2015 Share Posted October 22, 2015 Hello, I can use the following to dynamically add fields one at a time. I need a way for the "onclick" to provide multiple dynamic fields. e.g.(first,middle,last) if(isset($_POST['submit'])){ $children = ""; $more = TRUE; $i = 1; while($more){ if((isset($_POST['child_'.$i])) && ($_POST['child_'.$i] != "")){ $children .= $_POST['child_'.$i]; $children .= "</br>"; }else{ $more = FALSE; } $i++; } mysqli_query($con, "INSERT INTO content ( `children`) VALUES ( '$children')"); }?><!DOCTYPE html><html><head><link type="text/css" rel="stylesheet" href="css/style.css"><script type="text/javascript" src="js/fields.js"></script><title>Add/Remove Form Fields</title></head><body> <div id="container"> <form action="index.php" method="post"> Children <div id="children"> <input type="text" name="child_1" placeholder="Child's Name" style="width:250px; margin-left:7px; margin-right:4px;"> <input type="text" name="title_1" placeholder="Title" style="width:250px; margin-left:7px; margin-right:4px;"> <input type="button" id="add_field()" onClick="addField()" value="+"> </div> <input type="submit" name="submit" value="Submit"> </form> </div></body></html> SCRIPT var i = 1;function addField(){ i++; var div = document.createElement('div'); div.innerHTML = "<input type='text' name='child_"+i+"' style='width:250px; margin-left:7px; margin-right:7px;'><input type='button' id='add_field()' onClick='addField()' value='+'><input type='button' onClick='removeField(this)' value='-'>"; document.getElementById('children').appendChild(div);}function removeField(div){ document.getElementById('children').removeChild(div.parentNode); i--;} Quote Link to comment Share on other sites More sharing options...
mac_gyver Posted October 22, 2015 Share Posted October 22, 2015 (edited) i recommend using a 'template' method, where the first instance of your form field(s) is(are) inside of a <div></div> container and become a source template that you use when appending the dynamically added form fields. this eliminates the need to duplicate the markup for the form fields in both the html and in the javascript, i.e. DRY (Don't Repeat Yourself) programming. next, you need to use an array name for your form fields. this eliminates the need to maintain a counter in the javascript code and allows you to use php's array functions to loop over the submitted data. see the following example - <script type="text/javascript"> function addField() { // create an empty div element var div1 = document.createElement('div'); // get the template html and put it into the empty div div1.innerHTML = document.getElementById('template').innerHTML + "<input type='button' onClick='removeField(this)' value='-'>"; // append the new div to the target area on the page document.getElementById('add_here').appendChild(div1); } function removeField(div){ document.getElementById('add_here').removeChild(div.parentNode); } </script> <body> <form method='post' action='formaction.php'> Children <!-- Template. This first instance of "whatever" will be appended in the add_here div --> <div id="template"> <input type="text" name="child[]" placeholder="Child's Name" style="width:250px; margin-left:7px; margin-right:4px;"> <input type="text" name="title[]" placeholder="Title" style="width:250px; margin-left:7px; margin-right:4px;"> <input type="button" onClick="addField()" value="+"> </div> <!-- container to hold the dynamically added instances of "whatever" --> <div id="add_here"> </div> <input type='submit'> </form> Edited October 22, 2015 by mac_gyver Quote Link to comment Share on other sites More sharing options...
CurtHolland Posted October 22, 2015 Author Share Posted October 22, 2015 A very nice solution. Thank You 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.