Question

我有一个表单，我使用append()动态添加div。它成功创建了div，并且div内部有输入字段。但问题是，在从表单序列化数据后，它不包含动态创建的div中的数据。

这是我的createDiv功能：

function createDiv() {
    var count = 5;
    for (var i = 0; i < count; i++) {
        $('#userQues').append("<div class='col-md-4'> <div class='form-group'> " +
            "<label class='control-label' for ='data[" + i + "][questiona]'> Question A </label>" +
            "<input id='data[" + i + "][questiona]' name='data[" + i + "][questiona]' type='text' placeholder='' class='form-control input-md'/>" +
            "</div> </div>");
    }
};

创建我的div有问题吗？为什么序列化不包含我创建的div中的数据？

提前致谢！

这是序列化数据的地方。提交表单时：

$('#explorer_form').submit(function(e){
  var serializedData = $('#explorer_form').serialize();
  alert(serializedData);

  $.ajax({
    url : url + api,
    type : method,
    data : serializedData,
    success : function(response){
        $('#response').val(JSON.stringify(response));
    }
  });

  e.preventDefault(); //STOP default action
  e.unbind(); //unbind. to stop multiple form submit.
});

形式：

<form id='explorer_form'>
    <input id='uname' name='uname' type='text'/>
    <div id='userQues'></div>
    <button type='submit'>Submit</submit>
</form>

现在，提醒数据只是来自输入数据＆＃39; uname＆＃39;只要。它不会从创建的div中序列化数据。

Answer 1

确保您的userQues是一个表单，并在添加输入后执行序列化。您的代码可以在此处使用：http://jsfiddle.net/9v3khbts/

HTML

<form id="userQues">
</form>

<button id="doSer">Serialize</button>

JS

$(document).ready(function(){
  function createDiv() {
    var count = 5;
    for (var i = 0; i < count; i++) {
        $('#userQues').append("<div class='col-md-4'> <div class='form-group'> " +
            "<label class='control-label' for ='data[" + i + "][questiona]'> Question A </label>" +
            "<input id='data[" + i + "][questiona]' name='data[" + i + "][questiona]' type='text' placeholder='' class='form-control input-md'/>" +
            "</div> </div>");
    }
};

    createDiv();
    $('#doSer').click(function(){
        alert($('#userQues').serialize())
    })

});

Answer 2

<html>
<body>
<form id='explorer_form'>
    <input id='uname' name='uname' type='text'/>
    <div id='userQues'></div>
    <button type='submit'>Submit</button>
</form>

<div class="output"></div>
<script src="jquery.js"></script>
<script>
function createDiv () {
    var count = 5;
    for(var i=0; i<count; i++){
        $('#userQues').append("<div class='col-md-4'> <div class='form-group'> " + 
            "<label class='control-label' for ='data[" + i + "][questiona]'> Question A </label>" +
              // "<input id='data[" + i + "][questiona]' name='data[" + i + "][questiona]' type='text' placeholder='' class='form-control input-md'/>" +
            "<input id=data["+ i +"][questiona] name=data"+i+" type='text' placeholder='' class='form-control input-md'/>" +
            "</div> </div>"                   
        );
    }
};
createDiv();

$('#explorer_form').submit(function(e){
e.preventDefault();
    $(".output").text($("#explorer_form").serialize());
});
</script>
</body>
</html>

这对我来说很好。

不要在ID或名称中使用[]。

输出将是 -

enter image description here

Answer 3

您可以使用.appendTo（）https://api.jquery.com/appendTo/代替.append（）

Ajax serialize（）不包含动态创建的div的数据

3 个答案: