Question

I am using this script with jquery for my dynamic add/remove input field:

<script>
$(document).ready(function(){

var i = $('input').size() + 1;

$('#add').click(function() {
    $('<div><input type="text" class="field" name="dynamic[]" value="' + i + '" /></div>').fadeIn('slow').appendTo('.inputs');
    i++;
});

$('#remove').click(function() {
if(i > 1) {
    $('.field:last').remove();
    i--;
}
});

$('#reset').click(function() {
while(i > 2) {
    $('.field:last').remove();
    i--;
}
});

});
</script>

My input field code:

<a href="#" id="add">Add</a> | <a href="#" id="remove">Remove</a> | <a href="#" id="reset">reset</a>
<div class="inputs"><input type="text" name="dynamic[]" class="field" placeholder=""/></div>

So everything works fine with this code, but I can’t seem to figure out how to create more than one working box in the same webpage.

I tried adding numbers to the name field, (like dynamic2, dynamic3, etc) but it doesn’t do anything for me.

Is there a way to create another one of the same functioning input box, but with a different assigned name so I can POST it to PHP individually?

I am using this PHP for posting:

<?php
foreach($_POST['dynamic'] as $value) {
echo "$value <br />"; // change this to what you want to do with the data
}
?>

PHP posting works fine, but I can only do ONE input group at a time. I want to be able to do multiple on the same page.

I got the original script from this webpage:
http://papermashup.com/dynamically-add-form-inputs-and-submit-using-jquery/

Please help!

Answer 1

here is a jsFiddle implementation if doing the same for multiple blocks

all you have to do is create multiple blocks (3 blocks are given in the example) in html and you are ready to go.

in PHP you have to access it using

<?php
    if(isset($_POST)){
        echo '<pre>';print_r($_POST['dynamic1']);echo '</pre>';
        echo '<pre>';print_r($_POST['dynamic2']);echo '</pre>';
        echo '<pre>';print_r($_POST['dynamic3']);echo '</pre>';
    }
?>