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

Question

我尝试过修改this帖子，但由于某些原因它不起作用，我对JS非常陌生，所以我可能在代码中遗漏了一些东西，我只是不知道它在哪里。

我正在从制表符中构建一个三个阶段的过程，选项卡是：

• 联络表格；
• 表2；
• 表3；

我不希望用户必须单击表单上的“Submit”，然后单击单独的“继续”按钮才能转到第二个选项卡，因此，我希望将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或事件作为函数参数，然后调用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>