使用jQuery和AJAX提交动态表单

时间:2010-09-07 14:00:58

标签: javascript jquery html ajax

我正在使用jQuery克隆HTML下拉列表,我现在遇到的问题是克隆部分的数量没有限制,我必须将所有部分捕获到mySQL数据库中。

如何将具有不同ID的所有不同部分放入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>

这个真的让我难过,任何帮助都会受到赞赏!

提前Thanx!

1 个答案:

答案 0 :(得分:0)

您可以通过$.post()传递对象。但首先,当你克隆时,让克隆有一个包含某种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); });

现在你的PHP预定义$ _POST应该是['1'=&gt; [...],'2'=&gt; [...],...]的数组,依此类推。