首页 > 解决方案 > 使用 javascript 类方法重置先前提交的表单的值

问题描述

我正在尝试使用类方法来清除以前使用 vanilla Javascript 提交的表单。虽然该功能在类外工作,但在类内却是一场噩梦,使用.reset()会返回先前提交的值。理想情况下,我可以在其他方法中调用这个方法来保持干燥,因为清除表单的使用非常多。

我下面的结果是没有控制台错误,也没有预期的功能,只是之前提交的数据仍在填充表单。控制台记录方法中的元素 ( input)clearForm()返回预期的 DOM 元素。

我似乎存在某种知识空白,我想填补它。

目前我有这个清除:

[class and constructor]...
/* in my constructor this._form = document.querySelector(target); where target is a param 
   containing the target element's id or class */

       clearForm() {
            [...this._form.elements].forEach((input) => {
                if (input.type == "checkbox") {
                    input.checked = false
                    input.setAttribute("value", false);
                    return;
                }

                input.value = "";
                input.setAttribute("value", "");
            });
        }

我把它用在其他方法中,例如:

       async populateForm(id) {
            try {
                await this.clearForm();
                [additional functionality]...
            } catch (e) {
              ...
            }
        }

谢谢你的帮助!

标签: javascriptoop

解决方案


推荐阅读