表单提交按钮无法切换且JS代码无响应问题求助

问题根源分析 #

• DOM获取错误：getElementById仅支持单个ID参数，你一次性传了三个ID，导致input变量直接为null，自然无法绑定事件；另外draft_2不是标准DOM对象，应该用全局的document来获取元素。
• 逻辑漏洞：当前代码只判断当前输入框的内容，只要这个框有值就启用按钮，完全忽略了其他必填字段是否为空，不符合表单校验的基本逻辑。
• 初始状态缺失：页面加载时按钮没有设置禁用状态，一开始就可以点击，和你想要的“填完才启用”需求不符。

修正后的代码 #

HTML部分（修改提交按钮）

给按钮加上初始的disabled属性：

<input id="submit" type="submit" value="submit" disabled>

JavaScript部分

// 获取所有必填的输入/文本域元素
const requiredInputs = document.querySelectorAll('#full-name, #email-address, #message');
const submitButton = document.getElementById('submit');

// 校验所有必填字段是否已填写
function checkFormValidity() {
  // 检查每个必填元素的内容是否非空（去除首尾空格）
  const allFieldsFilled = Array.from(requiredInputs).every(input => input.value.trim() !== '');
  // 所有字段填完就启用按钮，否则禁用
  submitButton.disabled = !allFieldsFilled;
}

// 给每个必填元素绑定输入事件，包括键盘输入和粘贴等场景
requiredInputs.forEach(input => {
  input.addEventListener('keyup', checkFormValidity);
  input.addEventListener('change', checkFormValidity);
});

// 页面加载完成后立即执行一次校验，确保初始状态正确
checkFormValidity();

修正说明 #

1. 用querySelectorAll替代getElementById，可以一次性获取多个指定ID的元素，更适合批量处理表单字段。
2. 把校验逻辑封装成函数，每次输入变化时统一检查所有必填字段，确保只有当所有必填项都填完时，按钮才会启用。
3. 同时绑定keyup和change事件，覆盖键盘输入、鼠标粘贴等多种输入场景，避免遗漏。
4. 页面加载时主动执行一次校验，保证按钮初始状态是禁用的，符合需求逻辑。

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