I am trying to create a dynamic form using Jquery but don't know how to post those data using $_POST. The page
<html>
<head>
<title> Dynamically create input fields- jQuery </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var addDiv = $('#addinput');
var i = $('#addinput p').size() + 1;
$('#addNew').live('click', function() {
$('<p><input type="text" id="p_new" size="40" name="p_new_' + i +'" value="" placeholder="I am New" /><input type="text" id="p_new2" size="40" name="p_new_2' + i +'" value="" placeholder="I am New 2" /><a href="#" id="remNew">Remove</a> </p>').appendTo(addDiv);
i++;
return false;
});
$('#remNew').live('click', function() {
if( i > 2 ) {
$(this).parents('p').remove();
i--;
}
return false;
});
});
</script>
</head>
<body>
<h2>Dynammically Add Another Input Box</h2>
<form action="gen.php" method="post">
<div id="addinput">
<p>
<input type="text" id="p_new" size="40" name="p_new" value="" placeholder="Input Value" /><input type="text" id="p_new2" size="40" name="p_new2" value="" placeholder="Input Value" /><a href="#" id="addNew">Add</a>
</p>
</div>
</form>
</body>
</html>
Here is live example.. A Pen by Captain Anonymous Whatever, The new fields got an unique name="" value as p_new_1, p_new_21 for first new field, p_new_2, p_new_22 for second new field ...... ...... Now, I know I can display inserted data using <?php echo $_POST["p_new_1"]; ?> and similar way like this... But as a growing field, this form can have unlimited input field. How can I display all of those data in the page gen.php? It must be something like this example:
<html>
<body>
<div class="header">Generated content<div>
<p><a href="inserted data of first field of default row">inserted data of second field of default row</a></p>
<p><a href="inserted data of first field of first new row">inserted data of second field of first new row</a></p>
<p><a href="inserted data of first field of 2nd new row">inserted data of second field of 2nd new row</a></p>
<p><a href="inserted data of first field of 3rd new row">inserted data of second field of 3rd new row</a></p>
<p><a href="inserted data of first field of 4th new row">inserted data of second field of 4th new row</a></p>
And list go on according to submitted form....
</div></body></html>
I actually lake of knowledge of PHP and no idea about array or something named loop. Can someone do it for me? What I have to do in gen.php?