如何在文本框值变更时自动提交表单（无需点击提交/回车）

针对你的需求，我们可以通过JavaScript监听文本框的输入事件，当内容发生变化时自动触发表单提交。这里提供两种实用的方案，适配不同的场景：

方案1：监听input事件（实时触发） #

这个事件会在文本框内容每一次变化时触发（比如输入单个字符、粘贴内容），适合需要实时响应的场景。

修改你的代码，给文本框添加input事件监听器即可：

<html> 
<head></head> 
<body> 
  <div class="col"> 
    <form action="#" method="post"> 
      <select id="periodname" class="drpdwn" value=" " onchange='myFunction()'> 
        <?php foreach($period as $period): ?> 
          <option><?= $period['period']; ?></option> 
        <?php endforeach; ?> 
      </select> 
    </form> 
  </div> 
  <div class="col" style="width:200px"> 
    <form action="myprofile.php" method="post" name='periodGet' id='periodGet'> 
      <!-- 新增input事件，内容变化时自动提交表单 -->
      <input name='periodText' autocomplete="off" value="Period" oninput="document.getElementById('periodGet').submit()"> 
      <input type="submit" value="Go"> 
    </form> 
  </div> 
</body> 
</html>

方案2：监听change事件（失去焦点时触发） #

如果不需要实时提交，而是希望用户完成输入、文本框失去焦点时再提交，可以用change事件，避免频繁提交：

<input name='periodText' autocomplete="off" value="Period" onchange="document.getElementById('periodGet').submit()">

额外优化提示 #

• 如果你不需要显示提交按钮，可以给它加上style="display:none;"隐藏掉。
• 若想避免初始值（比如"Period"）触发提交，可以添加简单的判断逻辑，用脚本替代内联事件：

const periodInput = document.querySelector('input[name="periodText"]');
const initialValue = periodInput.value;

periodInput.addEventListener('input', function() {
  if (this.value !== initialValue) {
    document.getElementById('periodGet').submit();
  }
});

将这段脚本放在页面底部或者<head>标签内即可。

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