I'm building a form - a section of which dynamically generates and increments input field's individual ids when the user hits the 'replicate' button. For instance, an input field made for a first name has an id of 'firstname1', when it replicates it becomes 'firstname2' etc etc.
My problem is in the php 'confirmation' page I'm trying to build. I want to echo out every input field generated and filled without hardcoding a bunch of echoes. I was told to use arrays instead of individual variable names - i kind of understand the concept but am falling way short.
I tried to create an array to capture the value of every new input so I can just $_POST the array, then loop and echo each value, but I don't really understand what needs to change and where to implement it.
The following code replicates the entire container div, it's input fields, and increments it's class number:
$(#replicate').click(function(){
var $cloned = $('.container1').clone();
$cloned.find('input').val('');
$cloned.appendTo($('.emptyContainer'));
var container = $(".emptyContainer div").length;
var containerNumber = container + 1;
var containerClass = 'container' + containerNumber;
$(".emptyContainer .container1").attr("class", containerClass);
Then the input ids increment in the same fashion:
var fnameID = 'firstname' + containerNumber;
$('.emptyContainer #firstname1').attr({id: fnameID, name: fnameID});
There are more inputs that would include things like last name, phone, email etc.
Another user suggested:
foreach($_POST as $fieldName=>$fieldValue){
echo $fieldName." = ".$fieldValue."<br/>";
}
While that worked to get me everything on the php page it was all in one large block, which would make the later styling a bit troubling.
How do I grab the input values for each new input, store them in an array, and post them to the php side in such a way that all related information stays in it's related areas when the user hits submit?