JQuery AJAX提交表单时页面跳转至submit.php问题求助

我仔细看了你的代码，发现几个关键问题导致点击提交后页面直接跳转，没法实现无刷新提交，咱们一步步来修复：

1. 表单缺少action属性 #

你的HTML表单里没有指定action属性，但JS代码里用了$(form3).attr('action')来获取请求地址，这会导致AJAX请求默认指向当前页面（而不是你说的submit.php），进而引发页面刷新。

修复方法：给form标签加上action="submit.php"：

<form class="offerte-form" method="post" action="submit.php">
  <!-- 原有表单内容保持不变 -->
</form>

2. 确认jQuery正确加载 #

如果你的页面没有正确引入jQuery库，所有jQuery代码都会失效，自然没法阻止表单的默认提交行为。

检查方法：在你的自定义JS代码之前引入jQuery，比如放在页面底部：

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
// 你的AJAX代码放在这里
</script>

3. 优化事件绑定逻辑 #

你的JS代码里可以用$(this)指代当前表单，更简洁也避免变量引用问题，同时确保event.preventDefault()确实优先执行：

修改后的JS代码：

$(function() {
  // 获取表单和消息容器
  var form3 = $('.offerte-form');
  var formMessages3 = $('.offerte-form-message');

  $(form3).submit(function(event) {
    // 先阻止浏览器默认提交行为（这一步一定要放在最前面）
    event.preventDefault();
    
    // 打印日志确认事件触发，方便调试
    console.log("表单提交事件已触发，默认行为已阻止");

    // 序列化表单数据
    var formData3 = $(this).serialize();
    console.log(formData3);

    $.ajax({
      type: 'POST',
      url: $(this).attr('action'), // 使用当前表单的action属性
      data: formData3
    }).done(function(response) {
      // 成功后的处理逻辑
      $(formMessages3).removeClass('alert alert-danger').addClass('alert alert-success');
      $(formMessages3).text(response);
      // 批量清空表单
      $('#naamofferte, #naambedrijf, #adresofferte, #vestplaats, #postcode, #emailofferte, #telnrofferte, #offertevoor, #messageofferte').val('');
    }).fail(function(data) {
      // 失败后的处理逻辑
      $(formMessages3).removeClass('alert alert-success').addClass('alert alert-danger');
      $(formMessages3).text(data.responseText !== '' ? data.responseText : 'Helaas, er ging iets fout, probeer het opnieuw');
    });
  });
});

4. 排查潜在的JS冲突 #

如果上面的修改后还是有问题，检查页面上是否有其他JS代码绑定了表单的submit事件，或者有代码覆盖了event.preventDefault()的效果。可以暂时移除其他JS代码，只保留jQuery和你的表单AJAX代码，测试是否正常工作。

按照上面的步骤调整后，应该就能实现无刷新提交了。如果还有问题，可以打开浏览器的开发者工具（F12），查看Console面板有没有报错信息，或者Network面板看看AJAX请求是否正常发送到submit.php。

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