PHP and jQuery - pushing input values into an array to be POSTed

Question

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?

Answer 1

You can try following method, as this method works best for me in case of dynamic rows.

code is not much readable since i directly pasted from the project but still hope it would be helpful

$('.add-option').live('click',function(){

        if(rowCtr < ucount){
            var tr = '<tr class="input-'+counter+'"><td><select id="itb_users" class="itb_users" name="project[itb_users]['+counter+']" >'
                tr +=     '<option value=0>Select</option>'
                          <?php foreach ($itb_users as $item){ ?>
                tr +=             '<option grade="<?php echo $item->grade; ?>" value="<?php echo $item->id; ?>"><?php echo $item->first_name; ?></option>';  
                         <?php } ?>
                tr +=   '</select>'
                tr += '</td>'
                tr +=   '<td>&nbsp;</td>'
                tr +=   '<td><input class="_hour" id="project[input-hour]['+counter+']" name="hours['+counter+']" type="text" class="field" style="width:30px"/></td>'
                tr +=   '<td><img class="add-option" src="'+'<?php img_src('add.png'); ?>'+'" />&nbsp;&nbsp;<img class="remove-option" src="'+'<?php img_src('remove.png'); ?>'+'" /></td>'
                tr +=   '</tr>';
                counter++;
                rowCtr++;
     .......

on submitting the php will receive a variable project with related records.