表单提交后跳转首页且未关闭表单问题求助

你设置了onsubmit="return false"但页面仍跳转，大概率是这个阻止默认行为的逻辑没生效，或者有其他脚本干扰了表单提交流程。下面是几个直接有效的解决办法：

方法1：修复onsubmit事件绑定 #

先确保onsubmit的代码能正确阻止默认跳转，把原表单标签改成下面两种写法之一：

<!-- 写法1：用event.preventDefault()显式阻止 -->
<form name='myForm' data-form-id='IdFromWebhook' action='WebhookLink' method='post' onsubmit="event.preventDefault();">

<!-- 写法2：确保return false的引号正确（原代码里的&quot;要渲染成实际的双引号） -->
<form name='myForm' data-form-id='IdFromWebhook' action='WebhookLink' method='post' onsubmit="return false;">

方法2：用AJAX手动提交（彻底避免跳转，推荐） #

完全绕开表单的默认提交机制，自己写JS控制数据发送，这样页面绝对不会跳转，还能自定义提交后的反馈：

<form name='myForm' data-form-id='IdFromWebhook' id="myForm">
  <!-- 保留原有表单输入项 -->
  <div class="row">
    <div class="col-lg-12">
       <div class="form-group text_box">
          <label for='EMAIL_ADDRESS'>E-mail: </label><input id='insightly_email' name='email' type='text' required>
       </div>
    </div>
      <div class="col-lg-6">
       <div class="form-group text_box">
              <label for='FIRST_NAME'>First name: </label><input id='insightly_firstName' name='firstName' type='text' required>
       </div>
    </div>
      <div class="col-lg-6">
       <div class="form-group text_box">
              <label for='LAST_NAME'>Last Name: </label><input id='insightly_lastName' name='lastName' type='text' required>
       </div>
    </div>
    
      <div class="col-lg-4">
       <div class="form-group text_box">
<label for='Language__c'>Choose a language: </label>
<select id='insightly_language' name='language' required><option value='EN'>EN</option><option value='FR'>FR</option><option value='DE'>DE</option></select>
       </div>
    </div>
  </div>
  <!-- 把submit按钮改成button类型，避免触发默认提交 -->
  <div style="display:flex;justify-content:center"><input class="btn_three" type='button' value='Submit' onclick="submitForm()"></div>
</form>

<script>
function submitForm() {
  const form = document.getElementById('myForm');
  const formData = new FormData(form);
  
  // 发送数据到你的webhook地址
  fetch('WebhookLink', {
    method: 'POST',
    body: formData
  })
  .then(response => {
    if (response.ok) {
      // 提交成功后可自定义提示，比如弹窗或页面内提示
      alert('提交成功！');
      // 可选：重置表单内容
      form.reset();
    } else {
      alert('提交失败，请重试');
    }
  })
  .catch(error => {
    console.error('提交出错:', error);
    alert('提交出错，请稍后再试');
  });
}
</script>

方法3：排查页面其他脚本冲突 #

检查页面里有没有其他JS代码监听了这个表单的submit事件，可能是其他脚本覆盖了你的阻止跳转逻辑。可以打开浏览器控制台（F12），输入下面的命令查看表单绑定的事件：

getEventListeners(document.querySelector('form[name="myForm"]'))

如果看到额外的submit监听器，排查对应的脚本是否有跳转页面的逻辑。

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