如何在不使用重置的情况下在 Javascript 中提交后清除表单？

在处理表单数据时，通常需要在提交表单后将表单清除。常见的一种方法是使用表单的重置按钮，但有时候我们并不希望显示这样的按钮。那么该如何在 Javascript 中实现在提交后清除表单，而不使用重置按钮呢？

下面介绍几种实现方案：

方案一：重置表单的值

利用 DOM 的表单元素和元素属性，可以清空表单的值。代码如下：

const form = document.querySelector('form');
form.addEventListener('submit', function(event) {
  event.preventDefault();
  for (let i = 0; i < form.elements.length; i++) {
    if (form.elements[i].tagName === 'INPUT' || form.elements[i].tagName === 'TEXTAREA') {
      form.elements[i].value = '';
    } else if (form.elements[i].tagName === 'SELECT') {
      form.elements[i].selectedIndex = -1;
    }
  }
});

这里使用了 form.elements 获取到表单元素的列表，根据元素的标签名判断是输入框还是下拉框。然后分别将其值设为 '' 或 -1。

方案二：复制表单

如果表单不包含敏感数据的话，可以将整个表单重新生成一个副本。代码如下：

const form = document.querySelector('form');
const formHtml = form.outerHTML;
form.addEventListener('submit', function(event) {
  event.preventDefault();
  form.insertAdjacentHTML('afterend', formHtml);
  form.remove();
  const newForm = document.querySelector('form');
  newForm.reset();
});

这里用到了 form.outerHTML 将当前表单的 HTML 代码复制下来，然后使用 form.remove() 将原表单从 DOM 中删除，再使用 insertAdjacentHTML() 将复制的 HTML 代码插入到删除位置的后面，形成新的表单。

方案三：手动重设表单

在使用方案一时，会有两个问题：

1. 可能存在需要保留的默认值，比如隐藏字段；
2. 无法跨浏览器保持表单的默认状态。

因此，这里介绍一种手动重置表单的方式，可以将表单的默认状态存储到一个变量中，同时可以避免以上问题。代码如下：

const form = document.querySelector('form');
const initialValues = Array.from(form.elements).map((element) => ({
  tagName: element.tagName,
  name: element.name,
  value: element.value,
  checked: element.checked,
  selected: element.selected,
}));
form.addEventListener('submit', function(event) {
  event.preventDefault();
  for (let i = 0; i < form.elements.length; i++) {
    const el = form.elements[i];
    const initialValue = initialValues[i];
    if (initialValue && initialValue.tagName === 'INPUT' || initialValue.tagName === 'TEXTAREA') {
      if (el.type === 'radio' || el.type === 'checkbox') {
        el.checked = initialValue.checked;
      } else {
        el.value = initialValue.value;
      }
    } else if (initialValue && initialValue.tagName === 'SELECT') {
      for (let j = 0; j < el.options.length; j++) {
        const option = el.options[j];
        option.selected = (option.value === initialValue.value) && initialValue.selected;
      }
    } else {
      el.value = '';
    }
  }
});

这里利用了 Array.from() 将 HTMLCollection 转换为数组，并通过循环表单元素将其默认值保存到 initialValues 变量中。在每次提交表单时，将 initialValues 中保存的默认值重新写入表单，避免出现问题。

这就是在 JavaScript 中实现在提交后清除表单，而不使用重置按钮的方案。希望对你有所帮助。