I am using Javascript to dynamically create input fields in a form. Like, if the user inputs 3, my script should create 3 input fields having their name attributes as Member 1, Member 2 and Member 3.How do I set a name attribute to such elements using DOM ? And how do I access data from these fields in PHP using post method ?
Here is my sample code.
<?php session_start(); ?>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function addFields(){
var number = document.getElementById("member").value;
var container = document.getElementById("container");
while (container.hasChildNodes()) {
container.removeChild(container.lastChild);
}
for (i=0;i<number;i++){
container.appendChild(document.createTextNode("Member " + (i+1)));
var input = document.createElement("input");
input.type = "text";
input.name = "Member"+i;
container.appendChild(input);
container.appendChild(document.createElement("br"));
}
}
</script>
</head>
<body>
<form action="create.php" method="post">
<h2>Create Document :</h2>
Document Description :<input type="text" name="document_description" >
Number of members: (max. 10)<input type="text" id="member" name="number_of_receipents" value=""><br />
<a href="#" id="filldetails" onclick="addFields()">Fill Details</a>
<input type="button" value="Fill Details" name="filldetails" onclick="addFields()">
<input type="submit" name="Submit" button="submit">
<div id="container"/>
</form>
</body>
</html>
Instead of naming them Memberx name them as Member[],
Then $_POST['Member'] will return an array of all the submitted values
array (size=1)
'Member' =>
array (size=3)
0 => string 'Value1' (length=6)
1 => string 'Value 2' (length=7)
2 => string 'Value3' (length=6)
Code use in the example:
<?php
var_dump($_POST);
?>
<form method="POST">
<input type="text" name="Member[]" />
<input type="text" name="Member[]" />
<input type="text" name="Member[]" />
<button type="submit">GO</button>
</form>