Question

我正在尝试向Campaign Monitor提交表单。他们通过Ajax向POST提供this代码示例。

这是我的多步模式的代码。

          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是否为真，如果是，请继续并通过ajax提交表单。

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

我该如何解决这个问题？

Answer 1

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

只需注册一个事件处理程序并将其附加到＆＃34;提交＆＃34;事件＆＃34; myform＆＃34;，它实际上并没有导致提交。这意味着您希望每次提交表单时都要运行此功能。此处理程序函数应在之外的<{1}}块。就在它的下方。

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

$('.next').on('click', function(e){

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

有关＆＃34;提交＆＃34;的不同方法签名的详细信息，请参阅https://api.jquery.com/submit/。实际上。

Answer 2

您目前正在做的是连接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将替换为您发布的值。

Answer 3

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

（例如

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

});

）

然后在if(final_step)内，只需执行post而无需担心表单。

另外，如果您不想使用它的功能，那么您可以不在表单中设置提交按钮。只需创建一个带有click事件的元素，该事件发送数据而不是注册到表单的submit事件。

Answer 4

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

为什么这个表单不能用AJAX提交？

4 个答案: