Jquery ajaxform requires two clicks for dynamic form

Question

I have a form that is dynamically loaded using ajax. Once it is loaded, I then am able to submit the form so that it reloads the page. I am trying to now ajaxify the form so that I don't have to reload the page. I am using ajaxform plugin by malsup, however I am having trouble using this plugin correctly because I am trying to ajaxify a dynamically loaded form. Currently, with the code below, it requires that I submit the form twice to make any changes. In other words, once the form is loaded using a previous button on the page, I then have to click the submit button twice to submit the form. After the first click, which doesn't submit the form, every other click does. I don't understand why I have to submit the form twice the first time. Please see my code below.

$(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>

I tried using ajaxSubmit instead of ajaxForm, because I understand that ajaxform doesn't actually submit the form. When I do this, the form seems to submit on the first click (all the alerts appear), however nothing actually gets submitted. I would appreciate any help on this.

Answer 1

Found out what the problem was. I had to call ajaxform on page load, and then submit it. Not submit it and then call ajaxform. Anyway, this seems to be working.

$(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>

Answer 2

What data are you sending here ? And where are you sending them ?

And I guess you need to add a event.preventDefault in your onSubmit function.

I would recommend to use $.post() function. You can find more information here : https://api.jquery.com/jquery.post/