选择Select下拉选项时提交表单失效，求代码修复指导

你的代码存在三个核心问题，导致功能异常：

• 表单默认提交会立即刷新页面，控制台日志刚输出就被清空，无法看到执行结果
• 代码中尝试获取id="username"的元素，但页面里根本没有这个元素，会抛出Cannot read properties of null (reading 'value')错误
• 内联onchange="this.form.submit()"触发的提交，没有阻止默认行为，自定义逻辑执行后页面还是会跳转/刷新

以下是修复后的完整代码：

<!DOCTYPE html>
<html>
<body>
  <form id="form">
    <select name='toggle' id='toggle'>
      <option value="default">Default</option>
      <option value="details">Details</option>
    </select>
  </form>

  <script>
    const form = document.getElementById('form');
    const toggleSelect = document.getElementById('toggle');

    // 监听下拉框的change事件，触发表单提交
    toggleSelect.addEventListener('change', function() {
      form.submit();
    });

    // 监听表单提交事件
    form.addEventListener('submit', function(event) {
      // 阻止表单默认提交行为，避免页面刷新
      event.preventDefault();
      
      console.log("in submit");
      // 如果需要username输入框，先添加对应的DOM元素，比如：
      // <input type="text" id="username" name="username" placeholder="输入用户名">
      // 再获取值：
      // const username = document.getElementById("username")?.value || '未输入';
      // console.log(username);

      // 验证选中的选项值
      const selectedValue = toggleSelect.value;
      console.log("选中的选项值：", selectedValue);
    });
  </script>
</body>
</html>

关键修改说明： #

1. 移除内联onchange事件：改用JavaScript添加事件监听，代码更易维护，也方便和其他逻辑联动
2. 阻止表单默认提交：通过event.preventDefault()避免页面刷新，确保自定义逻辑执行完成且控制台日志能保留
3. 移除无效的username获取代码：如果确实需要这个输入框，先在HTML中添加对应的<input>元素，再获取其值
4. 添加选中值的日志输出：方便验证下拉框的选中状态是否正确传递

如果需要表单真正提交数据到后端（而不是只执行前端逻辑），可以在自定义逻辑执行完成后，手动调用event.target.submit()（注意不要在同一个事件处理函数里循环调用），或者使用AJAX发送表单数据。

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