如何使用 JavaScript onchange 事件提交表单？答案

【问题标题】：How can I use the JavaScript onchange event to submit a form?如何使用 JavaScript onchange 事件提交表单？
【发布时间】：2023-03-10 01:24:01
【问题描述】：

我有这样的代码：

<form action="checkin.php" method="post">
    <select name="roomname" onchange="???">
        <option value="">New Room:</option>
        <option value="room1">Room 1:</option>
        <option value="room2">Room 2:</option>
</form>

我想设置一个操作，以便在选择选项时将用户定向到checkin.php 页面，而无需使用提交按钮。我被告知使用onChange，但我不知道如何使用它。

【问题讨论】：

请修改您帖子的最后一部分。我不知道你想问什么。
“新房间”也应该是可提交的选项吗？它应该使用 onchange 自动提交吗？您应该知道，您不能更改到页面加载时选择所在的相同选项，因此无论哪个选项是默认选项都将无法访问。我建议使用占位符，例如：没有值和文本：“选择房间”
请不要。如果您想对更改事件做出反应，请将新内容加载到页面中并将下拉菜单保留在此处。我讨厌意外的重载。特别是如果我因为点击错误而不得不返回导航。特别是如果页面和/或我的设备慢得要命。

标签： javascript forms select input onchange

【解决方案1】：

<select name="roomname" onchange="this.form.submit()">
    ...
</select>

这个怎么样？

【讨论】：

【解决方案2】：

您可以使用这个简单的功能。它应该足够通用，也适用于其他形式：

<head>
  <script>
      function submitForm(elem) {
          if (elem.value) {
              elem.form.submit();
          }
      }
  </script>
</head>
<body>
  <form action="checkin.php" method="post">
    <select name="roomname" onchange="submitForm(this)">  
      <option value="">New Room:</option>
      <option value="room1">Room 1:</option>
      <option value="room2">Room 2:</option>
    </select>
  </form>
</body>

该函数检查您在选择 IE 中是否有一个值，您尚未更改为占位符条目。如果New Room 不是占位符，我建议制作一个，否则无论是否检查值，都无法访问它。

基本上这些函数会停止以下行为：

您转到此表格并选择“房间 1”
表单已自动提交，您转到checkin.php
您改变主意并点击返回按钮
浏览器会记住表单的状态，并且“房间 1”选项仍处于选中状态
您将下拉菜单更改回“新房间”，表单会检测到更改并提交。

编辑：还请注意，您缺少结束 </select> 标记。

【讨论】：