HTML表单文本输入能否设置多个action输出？仅用HTML+JS如何实现

实现方案 #

仅用HTML+JS就可以实现需求，核心逻辑是给每个搜索按钮预存对应搜索引擎的提交地址，点击按钮时动态修改表单的提交地址后再触发提交即可，后续新增搜索引擎无需修改JS逻辑，只需要加对应按钮即可。

完整代码 #

HTML部分

<form id="searchForm" method="get" target="_blank">
  <input type="reset" value="清空">
  <input type="text" name="q" autocomplete="off" autofocus required>
  <input type="submit" value="Google搜索" data-action="https://www.google.com/search">
  <input type="submit" value="Bing搜索" data-action="https://www.bing.com/search">
  <input type="submit" value="DuckDuckGo搜索" data-action="https://duckduckgo.com/">
  <!-- 后续新增引擎只需要新增类似下面的按钮即可 -->
  <!-- <input type="submit" value="XX搜索" data-action="对应引擎的查询提交地址"> -->
</form>

JS部分

const searchForm = document.getElementById('searchForm');
// 监听表单提交事件
searchForm.addEventListener('submit', function(e) {
  // 获取触发本次提交的按钮
  const activeBtn = e.submitter;
  // 读取按钮上预存的搜索引擎提交地址
  const targetAction = activeBtn.getAttribute('data-action');
  if (targetAction) {
    // 动态修改表单提交地址
    searchForm.action = targetAction;
  } else {
    // 无有效提交地址时阻止提交避免报错
    e.preventDefault();
  }
});

代码说明 #

• 不需要后端PHP参与，所有逻辑都在前端完成
• 主流搜索引擎的查询参数名都是q，和输入框的name属性对应，浏览器会自动把输入的搜索内容拼接到提交地址后，无需额外处理参数
• 表单上的target="_blank"属性可以让搜索结果在新标签页打开，不影响当前页面，不需要该效果可以直接删除这个属性
• 新增搜索引擎时只需要在表单内新增提交按钮，配置好按钮显示文本和对应的data-action提交地址即可，无需调整现有JS逻辑

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