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

想象一下你有：

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

然后您可以选择此容器中的所有表单：

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

这将为所选的所有表单激活给定函数，其中$（this）是当前表单。

Answer 4

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

那么这就是你需要的吗？

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

Answer 5

我会在动态添加到表单的字段中添加一些类。例如：“动态添加”。所以当你移动到另一个标签时，我会做类似的事情：

    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();
            }
        }
    });

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

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

5 个答案: