CODEWITHSUNDEEP
javascriptjquery
Grace
Grace

Reputation: 2588

AJAX code attached to submit event not working

I can't get a form to submit inside an ajax success function:

$('#formId').on('submit', function (e) { 
    e.preventDefault(); 
});

$('#submit').on('click', this.doStuff);

doStuff: function () {
    $.get('url').done(function (data) {
        if (data.IsSuccessful) {
            $('#formId').off('submit');
            $('#formId').submit();
        }
        else {
        }
    });
}

Weirdly it will do the submit the second time this event is triggered, but not the first, and it will submit independently with those 2 lines of code, but not inside the get (the debugger does hit it). How can I submit a form based on an ajax call being successful?

Upvotes: 4

Views: 122

Answers (2)

Wintergreen
Wintergreen

Reputation: 234

e.preventDefault(); method prevent form past and redirects to ajax call. Try this:

 $('#submit').click(function (e) {
    e.preventDefault();
    $.get('url').done(function (data) {
                if (data.IsSuccessful) {
                    $('#formId').submit();
                }
                else {

                }
        });
     });

Upvotes: 4

Mysteryos
Mysteryos

Reputation: 5791

Tweaking your code a bit:

The submit event will handle all the logic. Therefore, no matter how your form gets submitted, the event will trigger.

var check = false;
$('#formId').on('submit', function (e) { 
    return check;
});

$('#submit').on('click', function(){
   $.get('url').done(function (data) {
       if (data.IsSuccessful) {
          check = true;
          $('#formId').submit();
       }
       else
       {
         check = false;
       }
    });
    return false;        
});

Upvotes: 0

Related Questions