Jquery ajaxform 动态表单需要点击两次

Question

我有一个使用 ajax 动态加载的表单。加载后，我就可以提交表单，以便它重新加载页面。我现在正在尝试 ajax 验证表单，这样我就不必重新加载页面了。我正在使用 malsup 的 ajaxform 插件，但是我无法正确使用这个插件，因为我正在尝试 ajaxify 一个动态加载的表单。目前，使用下面的代码，它要求我提交两次表单才能进行任何更改。换句话说，一旦使用页面上的上一个按钮加载了表单，我就必须单击提交按钮两次才能提交表单。第一次点击后，不会提交表单，每隔一次点击都会提交。我不明白为什么我第一次要提交两次表格。请在下面查看我的代码。

$(document).ready(function() {   
    var options = {  
    beforeSubmit: showRequest,
    error:  showError,  // error
    success: showResponse  // post-submit callback 
}; 
$(document).on('submit', '#send-form', function(event) { 
               $('#send-form').ajaxForm(options);
               return false;
});
}); 

// pre-submit callback 
function showRequest(formData, jqForm, options) { 
  alert('Please wait...','Please wait...');
  return true; 
} 
// error callback
function showError(er, err, error) {  
  var currentAlert = $.jAlert('current');
  currentAlert.closeAlert();
  errorAlert('Error','Try Again Later');
} 
// post-submit callback 
function showResponse(responseText, statusText, xhr, $form)  { 
  var currentAlert = $.jAlert('current');
  currentAlert.closeAlert();
  successAlert('Success!', 'Your form has been sent');
} 

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

我尝试使用 ajaxSubmit 而不是 ajaxForm，因为我知道 ajaxform 实际上并没有提交表单。当我这样做时，表单似乎在第一次点击时提交（所有警报都出现），但实际上没有提交任何内容。如果对此有任何帮助，我将不胜感激。

Answer 1

您要向此处发送什么数据？您要将它们发送到哪里？

而且我想您需要在 onSubmit 函数中添加一个 event.preventDefault。

我建议使用 $.post() 函数。您可以在此处找到更多信息：https://api.jquery.com/jquery.post/

Answer 2

找出问题所在。我不得不在页面加载时调用 ajaxform，然后提交它。不是提交它然后调用ajaxform。无论如何，这似乎有效。

$(document).ready(function() { 
  var options = {  
    type: 'post',
    beforeSubmit: showRequest,
    error:  showError,  // error
    success: showResponse  // post-submit callback 
  }; 
$('#send-form').ajaxForm(options);
$('#send-form').live('submit', function (e) {
      e.preventDefault();
    });
}); 

// pre-submit callback 
function showRequest(formData, jqForm, options) { 
return true; 
alert('Please wait...');
} 
// error callback
function showError(er, err, error) {  
var currentAlert = $.jAlert('current');
currentAlert.closeAlert();
errorAlert('Error','Try Again Later');
} 
// post-submit callback 
function showResponse(responseText, statusText, xhr, $form)  { 
var currentAlert = $.jAlert('current');
currentAlert.closeAlert();
successAlert('Success!', 'Your form has been sent');
} 

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

Jquery ajaxform 动态表单需要点击两次

Jquery ajaxform requires two clicks for dynamic form

click

submit

ajaxform

ajaxsubmit