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

Refreshing Form fields in jquery tab

本文关键字：表单 字段 jquery 选项 刷新      更新时间：2023-09-26

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

使用过该功能：

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

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

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

您可以为所有输入定义一个通用类，并根据对焦或模糊等事件重置其值。例如

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

想象一下：

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

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

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

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

如果我

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

那么这是你需要的吗？

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

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

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

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

这将清除所有表单值： 

$('input:text, input:password, input:file, select, teaxarea').val('');
相关文章：