Rectangle 27 0

In one line you use $('form') to select the form to change its action, but then you use $(this) to try to select that same form. I would guess that this inside the callback function isn't what you expect it to be, and is something other than your form (possibly the window object).

$('form').attr('action', 'http://example.com').unbind('submit').submit();

$(this) was actually supposed to be $('form'), this was a mistake which i had corrected in the code forgot to edit it in the stackoverflow post before i posted. Do'h. Regards the chaining, yea i know i can do it all in one go, I just prefer doing it separately for better overview

@adamj Honestly, the code looks correct to me with that change. You'll probably have to debug it, see what's being returned by the AJAX request, see what parts of the code are firing, etc.

AJAX is fine no problems there. When it runs the .submit() for the first time it hits the AJAX it gets back the data and hits the success. It should then .unbind() the form from the submit and resubmit the form but the resubmit never occurs. By default you would instantly know whether it worked by it submitting the form which would lead to example.com, but this doesn't happen.

javascript - jQuery - Resume form submit after ajax call - Stack Overf...

javascript jquery
Rectangle 27 0

It's no good practice to reselect all form tags throughout your code, what if you have multiple forms on the page? Also you'd better use .on() and .off() with jQuery.

$(document).ready(function() {
    $('form').on('submit', function(e) {
        e.preventDefault();

        // cache the current form so you make sure to only have data from this one
        var form = this,
            $form = $(form);

        $.ajax({
            url: form.action,
            type: form.method,
            data: $form.serialize(),
            success: function(data) {
                if (data == 'true')
                {
                    $form.attr('action', 'http://example.com').off('submit').submit();
                }
                else
                {
                    alert('Your username/password are incorrect');
                }
            },
            error: function() {
                alert('There has been an error, please alert us immediately');
            }
        });
    });
});

I'll give the .on() a shot see if that helps it. Regards not using the form tag, you're right, but in this case there will always be only the single form on the page. If it were any other case I would have slapped an ID attribute on the form and targeted it on that.

Even if you add an ID I'd still cache the object, simply for performance and code consistency.

javascript - jQuery - Resume form submit after ajax call - Stack Overf...

javascript jquery
Rectangle 27 0

Solution was quite simple and involved adding and setting async to false in .ajax(). In addition, I have re-worked the code to work of the submit button instead which submits the form when the AJAX passes successfully.

$(document).ready(function() {
    var testing = false;
    $('#btn-login').on('click', function() {
        $.ajax({
            url: $('form').attr('action'),
            type: 'post',
            data: $('form').serialize(),
            async: false,
            success: function(data) {
                if (data == 'true')
                {
                    testing = true;
                    $('form').attr('action', 'https://example.com');
                    $('form').submit();
                }
                else
                {
                    alert('Your username/password are incorrect');
                }
            },
            error: function() {
                alert('There has been an error, please alert us immediately');
            }
        });

        return testing;
    });
});

javascript - jQuery - Resume form submit after ajax call - Stack Overf...

javascript jquery