如何使javascript函数依赖于成功的表单提交？

Question

我试图修改this帖子，但由于某些原因它不起作用，我对JS很新，所以我可能会遗漏代码中的一些内容我可以＆ ＃39;告诉你在哪里。

我用标签构建了一个3阶段流程，标签是：

• 联系表格;
• tab 2;
• tab 3;

我不希望用户必须点击“提交”＃39;在表格上然后单独的继续＆＃39;按钮转到第二个标签，因此我希望将Javascript查询/回调应用于表单提交按钮，该按钮链接到第二个标签但仅在表单已成功提交时。

这是我现有的Javascript：

<script>
jQuery(document).ready(function() {
  jQuery(".dhvc-form-submit").submit(function() {

    jQuery.ajax({
     type: "POST",
      url: "form_handler.php",
      data: jQuery(this).serialize(),
      success: function() {
        window.location = '#an_76234532'; });
       }
    })

  })
})
</script>

目前这不会触发任何事情。

提交按钮的课程为.dhvc-form-submit，

第二个标签的href ID为#an_76234532。

我错过了什么，如果不能，我怎么能实现这个功能呢？

Answer 1

我认为您遇到的问题是表单在ajax请求触发之前提交 - 您需要添加e或event作为函数参数然后调用e.preventDefault（）作为您的第一部分码。这样就可以提交，只需激活该功能，默认表单功能不会接管。

<script>
jQuery(document).ready(function() {
  jQuery(".dhvc-form-submit").submit(function(e) {
    e.preventDefault();
    jQuery.ajax({
     type: "POST",
      url: "form_handler.php",
      data: jQuery(this).serialize(),
      success: function() {
        window.location = '#an_76234532'; });
       }
    })

  })
})
</script>

Answer 2

它不会触发任何内容，因为该事件是一次点击。如果您的选择器是表单，它将在提交时触发，使用单击代替或更改表单的Id

的选择器

<script>
jQuery(document).ready(function() {
  jQuery(".dhvc-form-submit").click(function() {

    jQuery.ajax({
     type: "POST",
      url: "form_handler.php",
      data: jQuery(this).serialize(),
      success: function() {
        window.location = '#an_76234532'; });
       }
    })

  })
})
</script>