如何用JavaScript重置含PHP默认值的HTML表单？

你遇到的其实不是reset()方法失效，而是它的预期行为和你的需求不匹配：原生form.reset()的作用是把表单恢复到页面首次加载时的初始状态，如果PHP给输入框设置了value="0"，那这个0就是该输入框的初始值，所以调用reset()后它会回到0，而不是变成空，这就让你误以为方法失效了。

除了逐个清空输入框，这里有几个更优雅的解决方案：

方法1：利用defaultValue属性自定义重置逻辑 #

我们可以先调用原生reset()恢复大部分元素的初始状态，再针对那些初始值为0的输入框进行清空操作。输入框的defaultValue属性会保存页面加载时的原始值，不受用户后续输入影响，刚好可以用来做判断：

function customReset() {
  const form = document.getElementById("moduleform_insert");
  // 先执行原生重置，恢复表单到初始状态
  form.reset();
  
  // 找到所有初始值为"0"的输入框并清空
  const inputs = form.querySelectorAll('input');
  inputs.forEach(input => {
    if (input.defaultValue === "0") {
      input.value = "";
    }
  });
}

这个方法既保留了原生reset()对单选框、复选框、下拉框等元素的正确重置，又针对性地处理了PHP设置默认0的输入框，比逐个清空高效得多。

方法2：修改PHP输出逻辑，用placeholder替代value（业务允许时） #

如果这些0只是作为提示文本，不需要作为表单提交的默认值，那可以让PHP输出placeholder="0"而不是value="0"。这样原生reset()就会直接清空输入框，因为输入框的初始值是空的：

<!-- 原来的PHP输出 -->
<input type="text" name="some_field" value="0">

<!-- 修改后的PHP输出 -->
<input type="text" name="some_field" placeholder="0">

这个方案最简洁，但前提是业务上不需要把0作为默认提交值。

方法3：预存初始状态，实现完全自定义重置 #

如果你的需求更复杂（比如需要区分哪些元素要清空、哪些要保留初始值），可以在页面加载时先把每个表单元素的初始状态存起来，再自定义重置逻辑：

// 页面加载完成时保存所有元素的初始状态
const form = document.getElementById("moduleform_insert");
const initialStates = Array.from(form.elements).map(el => {
  if (el.type === 'checkbox' || el.type === 'radio') {
    return { name: el.name, checked: el.checked };
  } else if (el.tagName === 'SELECT') {
    return { name: el.name, value: el.value };
  } else {
    return { name: el.name, value: el.defaultValue };
  }
});

function customReset() {
  initialStates.forEach(state => {
    const el = form.querySelector(`[name="${state.name}"]`);
    if (!el) return;
    
    if (el.type === 'checkbox' || el.type === 'radio') {
      el.checked = state.checked;
    } else {
      // 按需调整：初始值为"0"则清空，否则恢复初始值
      el.value = state.value === "0" ? "" : state.value;
    }
  });
}

这个方法灵活性最高，你可以根据业务需求自由调整重置规则。

内容的提问来源于stack exchange，提问作者RICKYZH TC