使用jQuery和AJAX提交動態表單

我使用jQuery克隆HTML下拉列表，現在的問題是克隆部分的數量沒有限制，我必須將所有部分捕獲到一個mySQL數據庫。使用jQuery和AJAX提交動態表單

如何將不同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提前！

來源

2010-09-07 Odyss3us

您可以通過$.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'=> [...]， '2'=> [...]，...]等。

來源

2010-09-07 14:55:54 Zlatev

使用jQuery和AJAX提交動態表單

回答

相關問題