Submitting a dynamic form using jQuery and AJAX

Question

Hi guys, I am cloning a HTML drop down list using jQuery, the problem I have now is that there is no limit to the amount of cloned sections, and I have to capture all of the sections into a mySQL database.

How can I get all of those different sections with different ID's into a mySQL table, since I am using POST, how will the receiving PHP file know what variables to get from the header, and how do I get each cloned section to be it's own entry in the mySQL table?

my Javascript/jQuery:

    $("span.remove").live('click', function(){
        $(this).closest("div.container").fadeOut(400, function(){
            $(this).remove();
            $('#button').attr('disabled','');
        });
    });

    //initialize the button
    $('#button').attr('disabled','');
    $('#button').click(function(){

        var count = $("#systems_wrapper > .container").size();
        var lastID = $("#systems_wrapper > .container:last").attr('id');
        var exploded = lastID.split("_");
        var increment = Number(exploded[1])+1;

        if(count >= 5){
            $('#button').attr('disabled','disabled');
        }else {
            $('#button').attr('disabled','');
        }

        var test = $('#systems_0.container').clone().attr('id', 'system_' + increment).appendTo('#systems_wrapper');
        test.children(':nth-child(2)').append('<span class="remove"></span>');
        test.children(':nth-child(2)').children(':first').attr('id', 'mail_' + increment);

    });

//get the JSON object returned from test_post.php and run the necessary functions on the returned data
$.getJSON("test_post.php", function(data){

//clean out the select list
$('#box').html('');

    //run the for loop to populate the drop down list
    $.each(data, function(i, products) {
        $('#box').append(
            $('<option></option>').html(products.products)
        );
    });
});

HTML:

<h3>System Information:</h3>

<!-- Systems -->
<div id="systems_wrapper">
    <div class="container" id="systems_0">
        <label for="systems">Systems: </label>
        <div>
            <select id="box">
                <option>Select one</option>
            </select>
        </div>
    </div>
</div>
<div class="container">
    <input type="button" id="button" name="button" value="add a system" />
</div>

This one has really stumped me, any help would be appreciated!

Thanx in advance!

Answer 1

You could pass an object via $.post(). But first, when you are cloning let the clone has a variable(as a property) containing some kind of id.

$('#systems_0.container').clone().attr('id', 'system_' + increment).appendTo('#systems_wrapper')[0].myID=increment;


postData={},sections=$('div[id^=systems_]');

sections.each(function(i){
  var id=this.myID,self=$(this);

  //for example, choose what to store here.
  postData[id]=$('select#box option',self).toArray(); 
});

//posting
$.post('yourServerSideScript.php', postData,function(data){ console.log(data); });

Now your php predefined $_POST should be an array of ['1'=>[...], '2'=>[...], ...] and so on.