javascript - 刷新jquery选项卡中的表单字段

Question

如何重置可能动态生成并位于 jQuery 选项卡中的表单字段？当用户从一个选项卡移动到另一个选项卡时，应重置带有表单文本字段的第一个选项卡，并在重新访问选项卡时重置字段。

使用过的功能：

resetForm(formId){
    $(’#’+formId)[0].reset();
}

问题是该选项卡包含动态创建的表单字段（在添加更多时生成）。

在这种情况下，我们如何删除清除表单字段。

Answer 1

这将清除所有表单值：

$('input:text, input:password, input:file, select, teaxarea').val('');  

Answer 2

您可以为所有输入定义一个通用类，并根据 onfocus 或 blur 等事件重置它们的值。例如

document.getElementsByClassName("myclass").onfocus = function() {

}

Answer 3

我会在您动态添加到表单的字段中添加一些类。例如：“动态添加”。因此，当您移动到另一个选项卡时，我会执行以下操作：

    var form_values;
    $( ".selector" ).tabs({
        select: function(event, ui) { 
            if (ui.index != 0) { //if I didn't clicked on the first tab
                save_form_fields();
                $( ".dynamically_added" ).remove();
                $("#" + formId).reset();
            }
            else {
                add_dynamic_fields();
                restore_form_values();
            }
        }
    });

我没有测试代码，但我希望它有所帮助。如果没有，请告诉我，我会想到别的。

Answer 4

如果我理解正确，您想清除在表单中动态创建的字段吗？

那么这是你需要的吗？

resetForm(formId) { 
    $("input, textarea, select", $("#" + formId)).val(''); // Or .text('');
}

Answer 5

想象一下你有：

<div id="container>
    <form ...>
    ... dynamically generated forms etc
    <form ...>
</div>

然后您可以像这样选择此容器内的所有表单：

$('#container form').each(function(){
        $(this)[0].reset();
    });

这将为所有选定的表单触发给定函数，其中 $(this) 是当前表单。