尝试使用动态创建的输入元素序列化表单，但未发布元素的值答案

【问题标题】：Trying to serialize a form with dynamically created input elements, but values of elements aren't posted尝试使用动态创建的输入元素序列化表单，但未发布元素的值
【发布时间】：2014-12-27 07:44:26
【问题描述】：

我正在动态添加元素。但是，当我尝试序列化表单时，动态生成的元素都没有被序列化。

这是我用来向页面添加元素的函数：

function addObjects(IDname,classname)
{
    //to add more objects
    var number;
    switch(classname)
    {
        case "name": 
                    number = no_Name++;
                    break;
        case "part":    
                    number = no_part++;
                    break;                
    }
    var id = classname + number;

    $("#"+IDname).append('<tr class="'+id+'"><td><input id="'+id+'" class="'+id+'" type="text"> <button class="'+id+'" onclick=removeAdditions("'+id+'")>x</button></td></tr>');
}

页面如下所示：

<html>
<head>
    <script src="Controller.js" type="text/javascript"></script>
    <script type="text/javascript" src="https://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
    <script type="text/javascript">
        //in order to prevent form reload when button click occurs
    $(document).ready(function(){
        document.getElementById("ReportForm").onsubmit = function (event) { event.preventDefault(); }
  });
    </script>
</head>
<body>
<div class="detailsPane" id="detailsPane1" >
    <form id="ReportForm" name="ReportForm" >
      <table style="width: 100%;">
        <tbody>
                <tr>
                    <td>
                            1. Describe the Status briefly-
                    </td>
                    <td>
                            <textarea id="StatDescp" name="StatDescp"></textarea>
                    </td>
                </tr>
          </tbody>
        </table>
        <br>
        <table style="width: 100%;">
            <thead>
                <tr>
                    <th colspan="4" align="top">
                        Part Status
                    </th>
                </tr>
            </thead>
            <tbody>
                    <tr>
                        <td style="vertical-align:top;">
                            Part Name:
                        </td>
                        <td style="vertical-align:top;">
                            <table >
                                <tbody id="PartName">
                                    <tr class="partname0">
                                        <td><input class="part_name" type="text"> <button  onclick='addObjects("PartName","part_name");'>+</button></td>
                                    </tr>
                                </tbody>
                            </table>
                        </td>
            <tbody>
      </table>
    </form>
</div>
<div id="buttonDiv" >
    <a class="bottomLeftResultDiv" id="messageBox"></a>
    <input type="button" id="saveButton" value="Save" style="width:85px" onclick="save();" /> 
</div>
</body>
</html>

而终于这里是保存按钮。

function save() {
    var select = document.getElementById('newReportPane');
    var contents = $('#ReportForm').serialize();
    contents = contents.replace(/=on/g, "=checked");
    contents = contents.replace(/\+/g, " ");
    $("#messageBox").html("Saving report...");
    console.log(contents);
    $.post("/Report/Report1", { action: "save", content: contents }, function (data) {
        if (data != "ACK")
            $("#messageBox").html("Unable to save.");
        else
            $("#messageBox").html("Report saved successfully");
    });
}

当我点击保存按钮时，它只会发布这个StatDescp=，而没有任何动态生成的元素。我真的想不通为什么。任何帮助将不胜感激。

【问题讨论】：

你确定文本区有内容吗？
不，但即使是空内容也应该以 StatDescp=&Ac.. （等）的形式发布。 @Talmid 的回答解决了这个问题。
避免在 HTML 标记的连接字符串中构建评估的 JS！ jQuery 已经为此提供了一个 API：jsbin.com/xayoce/1/edit?js,output

标签： javascript jquery html forms dynamic

【解决方案1】：

为每个添加的输入赋予name= 属性。

来自http://api.jquery.com/serialize/

对于要包含在序列化字符串中的表单元素的值，该元素必须具有名称属性。

【讨论】：

是的，谢谢，这成功了。不知道我是怎么忘记为动态名称添加名称的。