How to disable a button after clicking it and enable it after the login process is completed by checking the server response in django

Question

I am working on a registration functionality in Django and python . When I click the Register button, the button should disable, and after successful registration, it should enable again automatically. How to achieve this?

I tried using ajax , but I don't know how to check the response from the server, whether the user is successfully registered or not.

Answer 1

If you're using a form with submit button then once you hit the button the registration process will start and will load the page you've told it to upon successful registration

If you're using javascript/ajax or something similar to send info to the backend and back then when you can disable the button with (where btnSubmit is the id and you're using JQuery):

$("#btnSubmit").attr("disabled", true);

When you get your return json from Django use,

$("#btnSubmit").attr("disabled", false);

Your overall script would be something like:

function myFunction() {
    $("#btnSubmit").attr("disabled", true);
    var info = [];
    info[0] = $('#username').val();
    info[1] = $('#password').val();

    $.ajax({
        url : "/some_url/", // the endpoint
        type : "POST", // http method
        data : { info : info }, // data sent with the post request
        // handle a successful response
        success : function(json) {
            // do stuff
            $("#btnSubmit").attr("disabled", false);
        },
        // handle a non-successful response
        error : function(xhr,errmsg,err) {
            $('#results').html("<div class='alert-box alert radius' data-alert>Oops! We have encountered an error: "+errmsg+
                " <a href='#' class='close'>&times;</a></div>"); // add the error to the dom
            console.log(xhr.status + ": " + xhr.responseText); // provide a bit more info about the error to the console
        }
    });
}