如何让提交按钮触发两个动作？保留index.php原有搜索逻辑

不用修改复杂的index.php代码，只需要借助前端JavaScript就能实现你的需求——在保留表单提交到index.php执行搜索的同时，在新标签页打开指定页面。以下是两种简单可靠的实现方式：

一、原生JavaScript实现（无依赖） #

假设你的表单结构类似这样：

<form id="searchForm" action="index.php" method="POST">
  <!-- 你的搜索输入框等表单元素 -->
  <input type="text" name="search_query" placeholder="输入关键词">
  <button type="submit">搜索并打开着陆页</button>
</form>

添加以下JavaScript代码（可以放在页面底部或者<head>里加defer属性）：

// 获取表单元素
const searchForm = document.getElementById('searchForm');

// 监听表单提交事件
searchForm.addEventListener('submit', function() {
  // 在新标签页打开你的着陆页，替换成实际URL
  window.open('https://your-landing-page.com', '_blank');
  // 不要阻止默认提交行为，这样表单会正常提交到index.php
});

为什么这么写？ #

• 监听表单的submit事件，确保是在用户主动提交时触发新标签页打开，避免被浏览器的弹窗拦截机制阻止。
• 不调用e.preventDefault()，所以原有提交到index.php的逻辑完全保留，没有任何改动。

二、jQuery实现（如果你的项目已引入jQuery） #

如果项目里已经用了jQuery，代码可以更简洁：

$('#searchForm').on('submit', function() {
  window.open('https://your-landing-page.com', '_blank');
});

关键注意事项 #

• 弹窗拦截问题：浏览器通常会拦截非用户主动触发的弹窗，但这里是在用户点击提交按钮（主动行为）时触发的，所以大部分情况下不会被拦截。如果遇到拦截，可以提醒用户暂时允许弹窗。
• URL路径：如果着陆页是站内页面，可以用相对路径（比如/landing-page.html），外部页面则用完整的URL。
• 表单选择器：确保你的表单能被准确选中（用id、name或者其他属性），避免事件绑定错误。

内容的提问来源于stack exchange，提问作者Vartan Perez Kalachian