Javascript 使用jQquery动态添加表单元素

我一直在试验下面的代码，除了在表单验证失败后强制克隆字段保持打开状态之外，似乎所有的事情都解决了。例如，如果一个或多个克隆字段处于打开状态，则有人无法填写必填字段并提交表单，打开的克隆字段将在表单刷新后消失。 在提交或刷新表单时，有人对如何强制打开的克隆字段保持打开状态有什么建议吗

谢谢， 抢劫

$（函数（）{
$（'#btnAdd'）。单击（函数（）{
var num=$（'.clonedInput'）.length，//当前有多少个“可复制”输入字段
newNum=newnumber（num+1），//正在添加的新输入字段的数字ID
newElem=$（'#group'+num）.clone（）.attr（'id'，'group'+newNum）.fadeIn（'slow'）；//通过clone（）创建新元素，并使用newNum值操纵其id
//操纵新元素内输入的名称/id值
//newElem.children（':first'）.attr（'id'，'name'+newNum）.attr（'name'，'name'+newNum）；
newElem.find（'.prod_num'）.attr（'for'，'ID'+newNum+''u product_name'）；
newElem.find（'.input_prod_num'）.attr（'id'，'id'+newNum+''u product_name'）.attr（'name'，'id'+newNum+''u product_name'）.val（''）；
newElem.find（'.serial_num'）.attr（'for'，'ID'+newNum+''u serial_num'）；
newElem.find（'.input_serial_num'）.attr（'id'，'id'+newNum+''u serial_number'）.attr（'name'，'id'+newNum+''u serial_number'））.val（''）；
newElem.find（'.purch_date'）.attr（'for'，'ID'+newNum+''u purch_date'）.attr（'class'，'purch_date'）；
//newElem.find（'.input_purch_date'）.attr（'id'，'id'+newNum+''u purchase_date'）.attr（'name'，'id'+newNum+'u purchase_date'）.val（''）；
newElem.find（'.input_purch_date'）.attr（'id'，'id'+newNum+''u purchase_date'）.attr（'name'，'id'+newNum+''u purchase_date'）.attr（'class'，'purch_date'）.val（''）；
$（'.purch_date'）.datepicker（'destroy'）；
//在最后一个“可复制”输入字段后插入新元素
$（“#组”+num）.after（newElem）；
$（“#ID”+newNum+“_product_name”）.focus（）；
var i=0；
$（'.purch_date'）。每个（函数（）{
$（this.attr（“id”，“date”+i）.datepicker（）；
i++；
});
$（'.purch_date'）.datepicker（）；
//启用“删除”按钮
$（'btnDel'）.attr（'disabled'，false）；
//将下面的“5”更改为可以复制表单的最大次数
如果（newNum==9）
$（'#btnAdd'）.attr（'disabled'，true）.prop（'value'，'youhavedthelimit'）；
});
$（'#btnDel'）。单击（函数（）{
//确认书
如果（确认（“您确定要删除此产品吗？此操作无法撤消”））
{
var num=$（'.clonedInput'）.length；
//我们目前有多少个“可复制”输入字段
$（'#group'+num）.slideUp（'slow'，function（）{$（this.remove（）；
//如果只剩下一个元素，请禁用“删除”按钮
如果（num-1==1）
$（'btnDel'）.attr（'disabled'，true）；
//启用“添加”按钮
$（'#btnAdd'）.attr（'disabled'，false）.prop（'value'，'addsection'）；}）；
}
返回false；
//删除最后一个元素
//启用“添加”按钮
$（'btnAdd'）.attr（'disabled'，false）；
});
$（'btnDel'）.attr（'disabled'，true）；
});

您正在谈论表单提交问题，但我们在您的代码中没有看到任何与表单提交相关的内容。但我可以告诉你。如果表单是通过定期回发提交的，那么动态添加的所有内容都会丢失，这是正常的。我建议您通过ajax调用提交表单，或在提交表单之前自行验证表单，如下所示：

$("myform").submit(function () {
    if(!$(this).validate())
    {
        //if the form don't validate, don't submit it
        return false;
    }
});

如果您在服务器端进行了验证。进行一个ajax调用来验证所做的事情

$("myform").submit(function () {

        $.ajax({
        type: "POST",
        url: url,
        data: $(this).serialize(), // serializes the form's elements.
        success: function(data)
        {
            //do what's appropriate
        }


    return false; //we control the behavior of the submission
});

---

祝您好运

以后的参考代码片段用于可运行的代码，以便我们可以轻松地运行示例。如果您显示的代码块不是完全可运行的代码段，那么它应该缩进4个空格，看起来就像没有代码段块的格式化代码。

$("myform").submit(function () {

        $.ajax({
        type: "POST",
        url: url,
        data: $(this).serialize(), // serializes the form's elements.
        success: function(data)
        {
            //do what's appropriate
        }


    return false; //we control the behavior of the submission
});