jQuery clone() 字段未通过

Posted

技术标签:

【中文标题】jQuery clone() 字段未通过【英文标题】:jQuery clone() fields not going through 【发布时间】:2012-02-14 05:51:47 【问题描述】:

我的页面上有一个表单,用户可以根据需要添加新字段。我使用 jQuery clone() 方法来实现这一点,这是我正在使用的 sn-p:

//  Dynamic forms
$('.addField').bind('click', function() 
    var tmp = '#' + $(this).attr('parent') + ' tr td div.clonedInput';  //  get the path to elements
    var x = $(this).attr('parent').split('_'); //   get the element's identifier
    var ident = '#' + x[0];

    var num = $(tmp).length;    //  count elements  
    var newNum = new Number(num + 1);   //  increase the number of the new element

    //  Create the new element and manipulate its id
    tmp = x[0] + '_' + newNum;
    var newElem = $(ident + '_' + num).clone().attr('id', tmp);

    //  Manipulate the new element's children
    newElem.find('input, select, textarea, label').each(function() 
        var kid = $(this);
        var y = '';
        var z;

        y = kid.attr(kid.attr('for') == undefined ? 'name' : 'for').split(x[0] + '_' + num);
        z = tmp + y[1];
        if (kid.attr('for') == undefined) 
            kid.attr('name', z);
            kid.attr('id', z);
            if (kid[0].tagName.toLowerCase() == 'textarea') 
                kid.html('');
             else 
                kid.attr('value', '');
            
         else 
            kid.attr('for', z);
        
    );

    //  Add the new element after the last one
    $(ident + '_' + num).after(newElem);

    //  Enable the associated "Remove" button
    $('.remField[parent="' + $(this).attr('parent') + '"]').attr('disabled', '');
);

我遇到的问题是动态添加的字段未包含在表单提交的结果中。我试过这个 sn-p:

$('form').submit(function() 
    alert($(this).serialize());
);

并且这些字段不会显示在结果字符串中。

代码有什么问题?

编辑: 原始 HTML

<h1>Add a recipe</h1>
<form name="add-recipe" action="add-recipe/" method="post" enctype="multipart/form-data">
<table class="form">
        <input type="hidden" name="formname" value="add-recipe" />
        <tr>
            <td>&nbsp;</td>
            <td><span style="font-weight: bold;">Basic details</span></td>
        </tr>
        <tr>
            <td><label for="name">Recipe name:</label></td>
            <td><input type="text" name="rec_name" id="name" maxlength="100" /></td>
        </tr>
        <tr>
            <td><label for="img">Recipe image:</label></td>
            <td><input type="file" name="rec_img" id="img" /></td>
        </tr>   
        <tr>
            <td><label for="cat">Category:</label></td>
            <td>
                <select name="rec_cat" id="cat">
                    <option value="-1"> ( Select a category ) </option>
                </select>
            </td>
        </tr>
        <tr>
            <td><label for="desc">Recipe description:</label></td>
            <td class="center"><textarea maxlength="1024" name="rec_desc" id="desc" cols="60" rows="10"></textarea></td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td><span style="font-weight: bold;">Times and servings</span></td>
        </tr>
        <tr>
            <td><label for="prep">Preparation time:</label></td>
            <td><input type="text" name="rec_prep" id="prep" maxlength="5" /></td>
        </tr>       
        <tr>
            <td><label for="cook">Cooking time:</label></td>
            <td><input type="text" name="rec_cook" id="cook" maxlength="5" /></td>
        </tr>       
        <tr>
            <td><label for="serving_size">Serving size:</label></td>
            <td><input type="text" name="rec_serving_size" id="serving_size" maxlength="45" /></td>
        </tr>       
        <tr>
            <td><label for="servings_per_recipe">Servings per recipe:</label></td>
            <td><input type="text" name="rec_servings_per_recipe" id="servings_per_recipe" maxlength="45" /></td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td><span style="font-weight: bold;">Ingredients</span></td>
        </tr>
        <!--    INGREDIENTS     -->
        <tr>
            <td>&nbsp;</td>
            <td>
                <table class="subform" id="ing_container">
                    <tr>
                        <td>
                            <div class="clonedInput" id="ing_1">
                                <div>
                                    <label for="ing_1_ing">Ingredient:</label><br />
                                    <select name="ing_1_ing" id="ing_1_ing">
                                        <option value="-1"> ( Select an ingredient ) </option>                  
                                    </select>
                                </div>
                                <div>
                                    <label for="ing_1_amount">Amount:</label><br />
                                    <input type="text" name="ing_1_amount" id="ing_1_amount" maxlength="5" />
                                </div>
                                <div>
                                    <label for="ing_1_det">Details:</label></br />
                                    <textarea maxlength="255" name="ing_1_det" id="ing_1_det" cols="56" rows="8"></textarea>
                                </div>
                                <div>
                                    <label for="ing_1_meas">Measurement:</label><br />
                                    <input type="text" name="ing_1_meas" id="ing_1_meas" maxlength="45" />
                                </div>                          
                            </div>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td class="center">
                <input type="button" class="addField" parent="ing_container" value="Add ingredient" />&nbsp;<input type="button" disabled="disabled" parent="ing_container" class="remField" value="Remove ingredient" />
            </td>
        </tr>
        <!--    STEPS   -->
        <tr>
            <td>&nbsp;</td>
            <td><span style="font-weight: bold;">Steps</span></td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>
                <table class="subform" id="step_container">
                    <tr>
                        <td>
                            <div class="clonedInput" id="step_1">
                                <div>
                                    <label for="step_1_desc">Description:</label></br />
                                    <textarea maxlength="1024" name="step_1_desc" id="step_1_desc" cols="56" rows="8"></textarea>
                                </div>                      
                            </div>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td class="center">
                <input type="button" class="addField" parent="step_container" value="Add step" />&nbsp;<input type="button" disabled="disabled" parent="step_container" class="remField" value="Remove step" />
            </td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td><span style="font-weight: bold;">Nutrition facts</span></td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td class="center"><input type="submit" value="Proceed" /></td>
        </tr>
</table>
    </form>

【问题讨论】:

您确定新的表单元素位于&lt;form&gt;&lt;/form&gt; 标签之间吗? 请将此作为答案发布。我还没有检查过。 如果您发布原始 HTML 代码也会有所帮助,尤其是因为您似乎使用了一些不寻常的技巧(如非标准的 parent 属性),这可能会破坏事情。 【参考方案1】:

您确定新表单元素位于&lt;form&gt;&lt;/form&gt; 标记之间吗?使用 Chrome 或 IE 或 Firebug for Firefox 中的 DOM 检查器来确保。

【讨论】:

非常感谢,mblase75!我什至不会看那个。 我遇到了这个回复,这让我发现我需要更改打开表单的位置。谢谢!

以上是关于jQuery clone() 字段未通过的主要内容,如果未能解决你的问题,请参考以下文章

如何通过 javascript 验证克隆的表单字段?

ASP.NET Web 窗体 - 通过 jquery 填充字段时客户端验证不起作用?

jquery中clone()实现表单中增加和减少输入项

如何从克隆表中获取数据属性?

DOM节点的复制和替换(jQuery)

jQuery-2.DOM---节点的复制与替换