jQuery

jQuery ajax use context to callback in form with event preventDefault

21 November 2017

3885

views

Example we have a form like this

<form action="user/login" id="login" method="post">
    ...
</form>

...

</form>

We want validate with ajax, and if error, make form not submit. Right? But preventDefault, is not working inside the ajax.

$(document).ready(function () {

    $('#login').on('submit', function (event) {
        var $form = $(this);

        $.ajax({
            data: $form.serialize(),
            type: 'POST',
            url: 'user/login_validate',
            success: function (data) {
                this.submit();
            },
            error: function (jqXHR) {
                alert(jqXHR.responseJSON.message);
                event.preventDefault();
            }
        });
    });

});

$(document).ready(function () {

$('#login').on('submit', function (event) {

var $form = $(this);

$.ajax({

data: $form.serialize(),

type: 'POST',

url: 'user/login_validate',

success: function (data) {

this.submit();

error: function (jqXHR) {

alert(jqXHR.responseJSON.message);

event.preventDefault();

}

});

If we using the variable and then make return, it’s also not working.

$(document).ready(function () {

    $('#login').on('submit', function (event) {
        var valid = true;
        var $form = $(this);

        $.ajax({
            data: $form.serialize(),
            type: 'POST',
            url: 'user/login_validate',
            success: function (data) {
                this.submit();
            },
            error: function (jqXHR) {
                alert(jqXHR.responseJSON.message);
                valid = false;
            }
        });

        return valid;
    });

});

$(document).ready(function () {

$('#login').on('submit', function (event) {

var valid = true;

var $form = $(this);

$.ajax({

data: $form.serialize(),

type: 'POST',

url: 'user/login_validate',

success: function (data) {

this.submit();

error: function (jqXHR) {

alert(jqXHR.responseJSON.message);

valid = false;

}

});

return valid;

});

So, we need use context, to make ajax callback and submit the form.

$(document).ready(function () {

    $('#login').on('submit', function (event) {
        event.preventDefault();
        var $form = $(this);

        $.ajax({
            context: this,
            data: $form.serialize(),
            type: 'POST',
            url: 'user/login_validate',
            success: function (data) {
                this.submit();
            },
            error: function (jqXHR) {
                alert(jqXHR.responseJSON.message);
            }
        });
    });

});

$(document).ready(function () {

$('#login').on('submit', function (event) {

event.preventDefault();

var $form = $(this);

$.ajax({

context: this,

data: $form.serialize(),

type: 'POST',

url: 'user/login_validate',

success: function (data) {

this.submit();

error: function (jqXHR) {

alert(jqXHR.responseJSON.message);

}

});

4 COMMENTS

Mike 29 October 2018 at 04:04

Thank you very much. You have saved my life, because i couldn’t find this solution 😀

learn more 8 December 2020 at 12:13

Greate post. Keep posting such kind of info on your blog.
Im really impressed by your site.
Hey there, You have done a fantastic job. I’ll definitely digg
it and in my view recommend to my friends. I’m sure they’ll be benefited from this web site.

visit website 12 December 2020 at 17:50

Excellent blog! Do you have any tips for aspiring writers?
I’m planning to start my own website soon but I’m a little lost
on everything. Would you recommend starting with a free platform like WordPress or go
for a paid option? There are so many options out there
that I’m totally confused .. Any tips? Thanks!

Roxana 7 January 2021 at 14:08

For most recent news you have to go to see web and on the web I found this
website as a finest website for newest updates.