Question

我一直在尝试使用以下代码，似乎已经解决了所有问题，除非在表单验证失败后强制克隆字段保持打开状态。例如，如果一个或多个克隆字段已打开，则某人无法填写必填字段并提交表单，打开的克隆字段将在表单刷新后消失。有人建议我如何在提交或刷新表单时强制打开克隆字段保持打开状态吗？

谢谢，罗布

<script> 
$(function () {
    $('#btnAdd').click(function () {
        var num     = $('.clonedInput').length, // how many "duplicatable" input fields we currently have
            newNum  = new Number(num + 1),      // the numeric ID of the new input field being added
            newElem = $('#group' + num).clone().attr('id', 'group' + newNum).fadeIn('slow'); // create the new element via clone(), and manipulate it's ID using newNum value
        // manipulate the name/id values of the input inside the new element

        //newElem.children(':first').attr('id', 'name' + newNum).attr('name', 'name' + newNum);

            newElem.find('.prod_num').attr('for', 'ID' + newNum + '_product_name');
            newElem.find('.input_prod_num').attr('id', 'ID' + newNum + '_product_name').attr('name', 'ID' + newNum + '_product_name').val('');

            newElem.find('.serial_num').attr('for', 'ID' + newNum + '_Serial_number');
            newElem.find('.input_serial_num').attr('id', 'ID' + newNum + '_Serial_number').attr('name', 'ID' + newNum + '_Serial_number').val('');

            newElem.find('.purch_date').attr('for', 'ID' + newNum + '_purchase_Date').attr('class', 'purch_date');
//          newElem.find('.input_purch_date').attr('id', 'ID' + newNum + '_purchase_Date').attr('name', 'ID' + newNum + '_purchase_Date').val('');
            newElem.find('.input_purch_date').attr('id', 'ID' + newNum + '_purchase_Date').attr('name', 'ID' + newNum + '_purchase_Date').attr('class', 'purch_date').val('');
 $('.purch_date').datepicker('destroy');
    // insert the new element after the last "duplicatable" input field
        $('#group' + num).after(newElem);
        $('#ID' + newNum + '_product_name').focus();

        var i = 0;
$('.purch_date').each(function () {
    $(this).attr("id",'date' + i).datepicker();
    i++;
});

        $('.purch_date').datepicker();


    // enable the "remove" button
        $('#btnDel').attr('disabled', false);

    // Change '5' below to the max number of times the form can be duplicated
        if (newNum == 9)
        $('#btnAdd').attr('disabled', true).prop('value', "You've reached the limit");
    });

    $('#btnDel').click(function () {
    // confirmation
        if (confirm("Are you sure you wish to remove this product? This cannot be undone."))
            {
                var num = $('.clonedInput').length;
                // how many "duplicatable" input fields we currently have
                $('#group' + num).slideUp('slow', function () {$(this).remove();
                // if only one element remains, disable the "remove" button
                    if (num -1 === 1)
                $('#btnDel').attr('disabled', true);
                // enable the "add" button
                $('#btnAdd').attr('disabled', false).prop('value', "add section");});
            }
        return false;
             // remove the last element

    // enable the "add" button
        $('#btnAdd').attr('disabled', false);
    });

    $('#btnDel').attr('disabled', true);
});
</script>

Answer 1

您正在讨论表单提交问题，但我们没有看到与您的代码中提交表单相关的任何内容。但我可以告诉你这个。如果表单是通过常规回发提交的，那么您丢失动态添加的所有内容是正常的。我建议您在提交表单之前提交带有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
});

祝你好运

使用jQuery动态添加表单元素

1 个答案: