Question

jQuery code add new virtual object “.add” to object “.main”

$(document).ready(function(){
    $('.main').on('click', '.add', function (){
    $('.main').append('<div class="add">Next element</div><input type="hidden" name="param[]" value="Next element"/>');
});
});

</script>

HTML code with form “main”:

<form action="" method="post" class="main">
    <div class="add">First element</div>
    <input type="hidden" name="param[]" value="First element"/>
    <input type="submit" name="submit" value="go"/>
</form>

PHP iterate “param” array:

if (isset($_POST['submit']))
{
    foreach ($_POST['param'] as $element) 
    {
        echo '<br/>'.$element;
    }
}

In $_POST will not have a element that was appended by jquery. How to fix?

Answer 1

It is because of this:

 <input type="hidden" name="param[]" value="Next element"/>

I tried this once too, doing the [] doesnt work you must put an actual index in there like:

<input type="hidden" name="param[1]" value="Next element"/>

Best way is to count the length of the items you already have and make the index of the element that.

So you code would look like:

$(document).ready(function(){
    $('.main').on('click', '.add', function (){
        var i = $('.my_input').length-1; // Because its an array
        $('.main').append('<div class="add">Next element</div><input class="my_input" type="hidden" name="param['+i+']" value="Next element"/>');
    });
});

Notice how I have added the class to the input?

Edit

Here is one that will definitely work with your current HTML

$(document).ready(function(){
    $('.main').on('click', '.add', function (){
        var i = $('input[name*="param"]').length-1; // Because its an array
        $('.main').append('<div class="add">Next element</div><input type="hidden" name="param['+i+']" value="Next element"/>');
    });
});

Could be better opitmised still but meh…