为什么获胜'这个表单是用AJAX提交的吗

Why won't this form submit with AJAX?

本文关键字：AJAX 提交 表单 获胜 为什么      更新时间：2023-09-26

我正试图向Campaign Monitor提交一份表格。他们通过Ajax向POST提供了这个代码示例。

这是我的多步骤模态代码。

          var next_step = false;
          var final_step = false;
          $('.next').on('click', function(e){
            e.preventDefault();
              if (next_step) {
                $('#step-1').slideUp(function(){
                  $('#step-2').slideDown(); 
                  $('.next').html('Submit');// Change button text to submit
                  final_step = true;
                 });    
              }
              next_step = true;
              if (final_step) {
                $('#myform').submit(function (e){
                  alert('submit started'); //This never fires unless I remove the preventDefault();
                  e.preventDefault();//But if I remove this, the page will refresh
                  $.getJSON(
                  this.action + "?callback=?",
                  $(this).serialize(),
                  function (data) {
                    if (data.Status === 400) {
                      alert('error');
                    } else {
                      alert('success');
                    }                        
                  })
                });
              }
          });

在表单的最后一步，我检查final_step是否为true，如果为true，则继续通过ajax提交表单。

问题是它什么都不做？但是，如果我从$('#myform')中删除e.preventDefault();，它将正常发布表单，并将您重定向到表单URL。

我该怎么解决这个问题？

您当前正在做的是连接一个onsubmit处理程序。未调用提交。

 $('#myform').submit(function (e){ });

和是一样的

<form action="#" method="post" onsubmit="return someFunction()">

这与。。。

$('#myForm').on('submit', function(e){});

您永远不会提交表格。

您想要的是使用Ajax将数据发布到服务器，而不是提交表单

你可以这样做：

$.ajax({
    type: "POST",
    url: "SomeUrl.aspx",
    data: dataString,
    success: function() {
      //display message back to user here
    }
  });

dataString将替换为您发布的值。

            $('#myform').submit(function (e){

只需注册一个事件处理程序并将其附加到"myform"的"submit"事件，实际上并不会导致提交。这意味着您表示希望每次提交表单时都运行此函数。此处理程序函数应位于$('.next').on('click', function(e){块的外部。就在它下面就可以了。

如果您希望在$('.next').on('click', function(e){块内提交表格，请写下：

$('#myform').submit();

这实际上会触发表单提交。

请参阅https://api.jquery.com/submit/有关"submit"的不同方法签名实际作用的更多信息。

此行：$('#myform').submit(function (e) {将作为参数传递的函数注册为表单提交事件的处理程序，并且不调用提交操作。我不确定这是否是问题所在，尽管我建议在向导流之外使用preventDefault()

(例如

$(document).ready(function() {
    $("#form").submit(function(e) {
         e.preventDefault();
    }
});

)

然后在if(final_step)内只做post，而不用担心形式。

此外，如果你不想使用表单的功能，最好不要在表单中设置提交按钮。只需创建一个带有发送数据的点击事件的元素，而不是注册到表单的提交事件

我不确定，但我总是在点击元素后执行$('#form').submit()，并在其他地方捕获此事件(例如通过$('#form').on('submit', function () { .. });(。

相关文章：