Get values inserted for field dynamically - php

Question

I would like to insert up to 10 fields dynamically 10 into my form :
<form action="" method="post">
...
<div id="dynamicInput">Entry 1
<br>
<input type="text" name="myInputs[]">
</div>
<input type="button" value="Add another text input" onClick="addInput('dynamicInput');">
...
<input type="submit" class="btn btn-primary" />
</form>
JS code :
var counter = 1;
var limit = 10;
function addInput(divName) {
if (counter == limit) {
alert("You have reached the limit of adding " + counter + " inputs");
} else {
var newdiv = document.createElement('div');
newdiv.innerHTML = "Entry " + (counter + 1) + " <br><input type='text' name='myInputs[]'>";
document.getElementById(divName).appendChild(newdiv);
counter++;
}
}
After clicking submit in form ( with post method ) I hope to get values inserted in this field in my php page?
For example I inserted 3 values dynamically using the JS code above, so I hope to get in my php page an array like this :
Array(
[0] => value1, [1] => value2, [2] => value3
)

Answer 1

Your initial form :
<div id="dynamicInput">Entry 1
<br><input type="text" name="myInputs[]">
</div>
and your javascript :
var newdiv = document.createElement('div');
newdiv.innerHTML = "Entry " + (counter + 1) + " <br><input type='text' name='myInputs[]'>";
document.getElementById(divName).appendChild(newdiv);
Give this dynamically generate field the name name='myInputs[]'> myInputs
Therefore when you receive the forms data back into your PHP code you will receive this in the $_POST array:
$_POST['myInputs'][0] = data in the first field
$_POST['myInputs'][1] = data in the second field
$_POST['myInputs'][2] = data in the third field
...
$_POST['myInputs'][9] = data in the tenth field

Answer 2

I don't know how to do with javascript but by using jquery you can do achieve it easily
please add script jquery.js in your site
HTML
<div id="dynamicInput">Entry 1
<input type="text" name="myInputs[]" class="myInputs" />
<input type="button" class="add_input" value="Add another text input" />
</div>
jQuery
$(document).ready(function(){
var limit = 10;
$(".add_input").on('click', function(){
if( $(".myInputs").length == limit ){
alert("You have reached the limit of adding " + limit + " inputs");
return false;
}
$(".myInputs:last").after("<br>Entry "+ ( $(".myInputs").length + 1 )+" <input type='text' name='myInputs[]' class='myInputs' />");
});
});
you can also check example at JSFiddle