location.href after successful login

Question

I have a login form and a xhr that checks credentials

If the credentials are fine I get token and want to redirect user to some page

Here is the form

<form method="post" action="" class="login" onsubmit="getToken()"> {% csrf_token %}
<p>
  <label for="login">Username:</label>
  <input type="text" name="login" id="login" value="login">
</p>
<p>
  <label for="password">Password:</label>
  <input type="password" name="password" id="password" value="password">
</p>
<p class="login-submit">
  <button type="submit">Log in</button>
</p>

And here is js:

function getToken(){
        document.cookie = "path=/; csrftoken = {% csrf_token %}";
        //alert($.cookie('csrftoken'));
        var xhr = new XMLHttpRequest();
        xhr.open('POST', 'api_url', false);
        xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
        xhr.setRequestHeader("X-CSRFToken", $.cookie('csrftoken'));
        xhr.send(JSON.stringify({"username":document.getElementById("login").value,
                    "password":document.getElementById("password").value}));
        if (xhr.status != 200) {
            alert( "Введите корректную комбинацию логина и пароля!" );

                    }
        else {
            alert( xhr.responseText );
            window.location.href = "http://www.google.com";
            document.cookie = "token = " + JSON.parse(xhr.responseText).key;
                }

}

However, after a successful login I get an alert with token and the cookie is set, but the page just refreshes.

window.location.href = "http://www.google.com";

doesn't work...

Answer 1

Try returning false from your event handler to prevent the default form submission:

<form method="post" action="" class="login" onsubmit="return getToken()">

And then return false in your event handler:

function getToken(){
   document.cookie = "path=/; csrftoken = {% csrf_token %}";
   //alert($.cookie('csrftoken'));
   var xhr = new XMLHttpRequest();
   xhr.open('POST', 'api_url', false);
   xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
   xhr.setRequestHeader("X-CSRFToken", $.cookie('csrftoken'));
   xhr.send(JSON.stringify({"username":document.getElementById("login").value, "password":document.getElementById("password").value}));
   if (xhr.status != 200) {
       alert( "Введите корректную комбинацию логина и пароля!" );
   } else {
       alert( xhr.responseText );
       window.location.href = "http://www.google.com";
       document.cookie = "token = " + JSON.parse(xhr.responseText).key;
   }
   return false;
}

Answer 2

you sorta left out a pretty big part of the xhr.. you need the onreadystatechange call or nothing is ever going to happen.

function getToken(){
    document.cookie = "path=/; csrftoken = {% csrf_token %}";
    //alert($.cookie('csrftoken'));
    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'api_url', false);
    xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
    xhr.setRequestHeader("X-CSRFToken", $.cookie('csrftoken'));
    xhr.send(JSON.stringify({"username":document.getElementById("login").value,
                "password":document.getElementById("password").value}));

    xhr.onreadystatechange = function(){ // <-- you need this..

        if (xhr.status != 200) {
            alert( "Введите корректную комбинацию логина и пароля!" );

                }
        else {
            alert( xhr.responseText );
            window.location.href = "http://www.google.com";
            document.cookie = "token = " + JSON.parse(xhr.responseText).key;
        }
   }
}