jQuery AjaxForm plugin have to submit twice

Question

I am trying to use the ajaxForm plugin to submit a form via ajax. The problem I am having is that I need to submit the form twice to actually get the form to submit. See code below, and I appreciate any help.

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

I tried to change it to ajaxSubmit and then add e.preventDefault(); but then the form doesn't submit at all when I try.

Emiliano · Answer 1 · 2016-12-25T00:04:43.017

0

In your code you have severals errors

1) the submit button and try ajax submit

use type button or a link when you click a submit button the browser try to send the form automatically and you are running a js but that's not prevent submit

2) use alert instead jAlert

change alert to jAlert

3) this code initialize the observer that execute the ajax

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

then you add it on click but you must add it on document load so here are the code

$( 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)
});

here is the HTML

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

edited Dec 25 '16 at 00:04

answered Dec 24 '16 at 23:10

Emiliano

698
9
30

Hi, I tried your correction and unfortunately it still requires two clicks to submit. – LearntoExcel Dec 24 '16 at 23:25
My correction fix one problem, the second problem is that you launch the browser alert // alert('Please wait...'); instead a jAlert and after that you want get it with jAlert var currentAlert = $.jAlert('current'); – Emiliano Dec 24 '16 at 23:37
Hi @Emiliano the alert is not the problem. alert is shorthand for another plugin that I use. When i change the input type to button, the form won't submit at all now. – LearntoExcel Dec 24 '16 at 23:52
remember change the selection on click event $(document).on('click', 'input.submit-btn', function () { – Emiliano Dec 24 '16 at 23:55
I did. In your answer, 'button.submit-btn' still exists as well. And I changed that to input.submit-btn. – LearntoExcel Dec 24 '16 at 23:58
@LearntoExcel I believe that I improve my answer – Emiliano Dec 25 '16 at 00:07
I am sorry and I appreciate your help but the form doesn't submit at all now. I also don't see why you have the form submit on document ready. I don't want it to submit until the input button is clicked. – LearntoExcel Dec 25 '16 at 00:20

jQuery AjaxForm plugin have to submit twice

1 Answers1