为何点击Submit后页面跳转至404错误？JavaScript表单问题求助

问题根源 #

1. HTML表单默认行为：未设置action属性时，表单会自动提交到当前页面URL。如果是本地文件打开（file://协议）或服务器无对应处理脚本，就会触发404。
2. 你的验证函数没有阻止表单的默认提交流程，所以弹窗提示后表单依然会提交，导致页面跳转。

解决步骤 #

1. 阻止表单默认提交行为 #

在验证函数中通过event.preventDefault()阻止默认提交，仅当所有验证通过时才允许提交（如果后续需要对接后端）。同时修改onsubmit事件传递event参数。

2. 修正表单中的错误 #

• 单选框需要统一name属性才能实现互斥选择，且id不能重复
• 修正textarea的闭合写法（HTML中textarea不能自闭合）

修改后的完整代码 #

<html>
<head>
  <title> Newsletter Application Form</title>
  <script>
    function validate(event) {
      // 验证姓名
      const nameInput = document.getElementById("txtName");
      if (nameInput.value.trim() === "") {
        alert("Name must be filled out");
        event.preventDefault();
        return;
      }
      // 验证邮箱（可扩展）
      const emailInput = document.getElementById("txtEmail");
      if (emailInput.value.trim() === "") {
        alert("Email must be filled out");
        event.preventDefault();
        return;
      }
      // 验证单选框
      const selectedTopic = document.querySelector('input[name="radNewsletter"]:checked');
      if (!selectedTopic) {
        alert("Please select a topic");
        event.preventDefault();
        return;
      }
    }
  </script>
</head>
<body>
  <form name="frmNews" onsubmit="validate(event)">
    <h2>Newsletter Application</h2>
    <p>To get our newsletters in your inbox, give us a few details
      about yourself.<br />Then tell us why you are interested in this topic in
      100 words or less.</p>
    <table>
      <tr>
        <td class="frmDetails">Name:</td>
        <td><input type="text" id="txtName" size="20" /></td>
      </tr>
      <tr>
        <td class="frmDetails">Email:</td>
        <td><input type="text" id="txtEmail" size="20" /></td>
      </tr>
      <tr>
        <td class="frmDetails">Topic:</td>
        <td>
          <input type="radio" name="radNewsletter" id="radHealth" value="health" />Health and Wellness<br />
          <input type="radio" name="radNewsletter" id="radWriting" value="writing" />Creative Writing<br />
          <input type="radio" name="radNewsletter" id="radGardening" value="gardening" />Gardening<br />
        </td>
      </tr>
      <tr>
        <td class="frmDetails">I am interested in this topic because:</td>
        <td>
          <textarea id="txtTopic" cols="40" rows="5"></textarea>
        </td>
      </tr>
      <tr>
        <td class="frmDetails"></td>
        <td><input type="submit" value="Submit" /></td>
      </tr>
    </table>
  </form>
  <p id="isValid"> </p>
</body>
</html>

额外说明 #

如果后续需要对接后端处理表单，只需给form标签添加action属性（指向后端接口URL）和method属性（如POST）即可，验证逻辑可保留。

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