防止在 jQuery 表单上提交

Question

I'm setting up a password control on a login form with jQuery and ajax.
So far, this is the script

$(document).ready(function() {
    $("#login-form").submit(function(e) {
        var csrftoken = getCookie('csrftoken');
        var password = $('#login-password').val();
        var email = $('#login-email').val();

        $.ajax({
            url: "/password_check/",
            type: "POST",
            dataType: "json",
            data : {
                csrfmiddlewaretoken: csrftoken,
                password: password,
                email: email
            },
            success: function(result) {
                document.getElementById("login-error").innerHTML = result.response;
                event.preventDefault();
            }
        });
        return false;
    });
});

With this, the error gets caught when firing the submit button, but if the password is correct the submit doesn't work (even though the error doesn't show up anymore).
What am I missing?

Answer 1

You have an asynchronous ajax call, so by the time your success function fires, the form submit event has passed so you need to submit the form again but use the DOM method, which will bypass the jQuery event handler and allow the form to submit.

success: function(result) {
    if(result == "correct"){
        document.getElementById("login-form").submit();
    } else {
        document.getElementById("login-error").innerHTML = result.response;
    }
}

As you didnt say what response indicates a correct password, I have used result == "correct" , so change that accordingly.

Answer 2

You have to return false only if u dont want to submit the form. If password is correct you need to return true in your case.