自定义JavaScript/HTML元素按钮onclick同时执行两个功能的咨询

问题根源 #

你现有提交按钮的逻辑存在两个问题：

1. onclick="#submit-form;location.href=nextURL3;"中#submit-form是锚点标识不是可执行的JS代码，会触发语法错误，导致后续跳转逻辑也被中断
2. 若直接执行跳转，浏览器会立即刷新页面中断未完成的表单提交请求，导致手机号数据无法正常上传

修复步骤 #

步骤1：补充完善头部JS代码 #

你之前贴的头部JS代码缺失了开头的<script>标签，同时新增自定义提交跳转函数，最终头部代码如下：

<script>
function getParameterByName(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}
var newParam = getParameterByName('wj_lead_unique_link_live_room')
var nextURL3 = ('https://raisingcapitalforrealestate.com/ty-confirmation?wj_lead_unique_link_live_room=' + newParam);
var nextURL4 = ('https://raisingcapitalforrealestate.com/you-are-registered?wj_lead_unique_link_live_room=' + newParam);  

// 新增：表单提交后跳转的自定义函数
function submitFormAndJump() {
  // 若你的表单有自定义ID，把下面的phoneOptinForm替换为实际ID；如果页面只有1个表单，直接用document.querySelector('form')即可
  const targetForm = document.getElementById('phoneOptinForm') || document.querySelector('form');
  // 异步提交表单数据，不中断页面流程
  fetch(targetForm.action, {
    method: targetForm.method || 'POST',
    body: new FormData(targetForm)
  }).then(() => {
    // 提交成功后跳转
    location.href = nextURL3;
  }).catch(() => {
    // 提交异常时也可正常跳转，避免用户卡顿
    location.href = nextURL3;
  });
}
</script>

步骤2：修改提交按钮的onclick属性 #

把原有提交按钮的onclick="#submit-form;location.href=nextURL3;"替换为以下内容：

onclick="submitFormAndJump(); return false;"

return false的作用是阻止a标签的默认跳转行为，避免打断自定义执行逻辑。

验证方式 #

修改完成后点击提交按钮，可先在浏览器开发者工具的「网络」面板确认表单提交请求成功发出，再检查跳转后的URL是否携带wj_lead_unique_link_live_room参数即可。

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