克隆的表单字段未提交（没有 $_POST 数据）答案

【问题标题】：cloned form fields not submitting (no $_POST data)克隆的表单字段未提交（没有 $_POST 数据）
【发布时间】：2012-08-03 22:15:34
【问题描述】：

我在表格中有一个表格，可以选择复制某一行（从而允许用户根据需要添加更多字段）。克隆工作正常，事件数据和处理程序工作正常。但是，当提交表单时，克隆的表单字段数据不会发布。下面是我用于克隆字段的代码，它可以正常工作并解决任何重复 ID 的问题。任何关于为什么克隆字段不提交的建议/帮助将不胜感激。

$('#btnAddNewField').click(function() {
    var currLength = $('.cloneInput').length;   
    var newID = new Number(currLength + 1); 

    var clonedField = $('#field_id' + currLength).clone(true);  
    clonedField[0].setAttribute('id', 'field_id' + newID);      
    clonedField.find(':text').each(function() {                             
        this.setAttribute('id', this.getAttribute('id') + newID);               
        this.setAttribute('name', this.getAttribute('name') + newID);       
    });
    $('#field_id' + currLength).after(clonedField);

HTML：

<tr id="field_id_1">
    <td>
    <table>             
        <tr>
            <td>Pick option</td>
            <td> 
                <select name="choice_1" id="choice_1"  parent="true">
                    <option value="null" selected="selected">Select</option>
                    <option value="1">option 1</option>
                    <option value="2">option 2</option>
                    <option value="3">option 3</option>             
                </select>
            </td>
        </tr>
        <tr>
            <td>Pick next option</td>
            <td> 
                <select name="next_choice_1" id="next_choice_1">
                    <option value="null" selected="selected">Select next</option>                
                </select>
            </td>
        </tr>             
         <tr>
            <td>Image:</td>
            <td><input type="file" name="image_1" id="image_1"/></td>
        </tr>           
    </table>
    </td>                               
</tr> 
<tr>
    <td></td>
    <td> 
        <input type="button" value="Add New" id="btnAddNewField" /> 
        <input type="button" value="Remove" id="btnDelField" />
    </td>        
</tr>

【问题讨论】：

.find(':text) 中缺少的' 是错字吗？还是您的实际代码中存在该错误？提示：看看语法高亮。
你有没有看到这个 jQuery 代码执行后的输出 HTML？克隆的字段应具有唯一名称，或与附加[] 相同的名称，即foo[]。然后所有的值都将保存在foo[0]、foo[1]...foo[index] 这种方法也使您免于使用计数器。至于唯一 ID，您可以使用 class 而不是 ID..

标签： javascript jquery forms clone

【解决方案1】：

我没有看到您更改克隆表单字段的名称属性的任何地方。您需要更改此设置，以免发布的数据被其他字段覆盖。

【讨论】：

我将更改添加到克隆字段的名称属性中，但仍然不起作用。查看更新的代码示例。
看看一些示例 HTML 源代码会很有帮助。

【解决方案2】：

我认为您对帖子的工作方式有误。您实际上应该为克隆字段创建一个新名称，因为这是用于发布变量的名称。创建一个新的 id 只是为了生成有效的 html，而与实际发布无关。

【讨论】：