Отправка динамической формы с использованием jQuery и AJAX

Question

Я клонирую раскрывающийся список HTML с помощью jQuery, проблема, с которой я столкнулся сейчас, заключается в том, что количество клонированных разделов не ограничено, и мне нужно захватить все разделы в базе данных mySQL.

Как я могу получить все эти разные разделы с разными идентификаторами в таблицу mySQL, так как я использую POST, как полученный PHP-файл узнает, какие переменные получить из заголовка, и как мне получить каждый клонированный разделэто собственная запись в таблице MySQL?

мой 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>

Это действительно поставило меня в тупик, любая помощь будетприветствуется!

Спасибо заранее!

Answer 1

Вы можете передать объект через $.post(). Но сначала, когда вы клонируете, позвольте клону иметь переменную (как свойство), содержащую некоторый идентификатор.

$('#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); });

Теперь ваш php предопределенный $ _POST должен быть массивом ['1' => [...], '2' => [...], ...] и т. Д.