jQuery AjaxForm 插件必须提交两次

Question

我正在尝试使用 ajaxForm 插件通过 ajax 提交表单。我遇到的问题是我需要提交两次表格才能实际提交表格。请参阅下面的代码，感谢您的帮助。

$(document).on('click', 'button.submit-btn', function () {
    alert('Please wait...');
    setTimeout(function() {
    $('button.submit-btn').attr('disabled', true);
    }, 50)
    $('#send-form').ajaxForm(function() { 
      var currentAlert = $.jAlert('current');
      currentAlert.closeAlert();
      successAlert('Success!', 'The form has been submitted');
      $('button.submit-btn').attr('disabled', false);
    }); 
});

 <form action="" method="post" id="send-form">
     <button type="submit" class="submit-btn" name="send-modal-form" value="submit"></button>
 </form>

我尝试将其更改为 ajaxSubmit 然后添加 e.preventDefault();但是当我尝试时，表单根本没有提交。

Answer 1

在你的代码中有几个错误

1）提交按钮并尝试ajax提交

使用类型按钮或链接 当您单击提交按钮时，浏览器会尝试自动发送表单并且您正在运行 js，但这不会阻止提交

2) 使用警报代替 jAlert

将警报更改为 jAlert

3) 此代码初始化执行 ajax 的观察者

 $('#send-form').ajaxForm(function() { 
      var currentAlert = $.jAlert('current');
      currentAlert.closeAlert();
      successAlert('Success!', 'The form has been submitted');
      $('button.submit-btn').attr('disabled', false);
    }); 

然后您在点击时添加它，但您必须在文档加载时添加它 所以这里是代码

$( document ).ready(function() {

    $('#send-form').ajaxForm(function() { 
      var currentAlert = $.jAlert('current');
      currentAlert.closeAlert();
      successAlert('Success!', 'The form has been submitted');
      $('button.submit-btn').attr('disabled', false);
    }); 
});

$(document).on('click', 'input.submit-btn', function () {
    jAlert('Please wait...','Please wait...');
    setTimeout(function() {
    $('button.submit-btn').attr('disabled', true);
    }, 50)
});

这里是 HTML

 <form action="" method="post" id="send-form">
     <input type="button" class="submit-btn" name="send-modal-form" value="submit" />
 </form>