Javascript page not redirecting

Question

I'm trying to make a page redirect after a login attempt, but for some reason it refuses to do so. I think it may be the btoa function but I am not sure. The alert section of code works, but not the redirect part.

Anyways, here is my code

function setCookie(cname, cvalue, cname2, cvalue2, exdays) {
    var d = new Date();

    d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));

    var expires = "expires=" + d.toUTCString();

    document.cookie = cname + "=" + cvalue + "; " + expires;
    document.cookie = cname2 + "=" + cvalue2 + "; " + expires;
}

$(document).ready(function(e) {
    $('#username').focus();

    // upon login, set the cookie 
    $('#submit').click(function() {
        if ($('#username').val() != "" && $('#password').val() != "") {

            /*
              -------- Base64 Encryption logic --------
                This is in no way meant to be a secure encryption method, 
                but it is extremely useful for writing obfuscated strings to either a document
                or a cookie file without needing to worry about quotes or characters breaking things. 
            */ 

            // encrypt the password with base 64 (using the btoa function)
            var encrypted_password = btoa($('#password').val());

            // set cookie
            setCookie("username", $('#username').val(), "password", encrypted_password, 365);

            // to decrypt, use atob function
            // var decrypt = atob(encrypted_password);

            // test to make sure it worked
            // alert(encrypted_password);
            // alert(decrypt);
            window.location = "test.html";
        } else {
            alert("All fields must be filled out");
        }
    }); 
});

HTML:

<form>
                <div class="form-group">
                    <label for="username">Username</label>
                    <input type="text" class="form-control" name="username" id="username" placeholder="Enter username here">
                </div>

                <div class="form-group">
                    <label for="password">Password</label>
                    <input type="text" class="form-control" name="password" id="password" placeholder="Enter password here">
                </div>

                <div class="form-group">
                    <button type="submit" class="btn btn-default" id="submit">Login</button>
                </div>
            </form>

Answer 1

You should replace your #submit click event with a form submission event that you cancel. When preventing that kind of event the browser won't post or get the data like a regular page and won't refresh the page, it will require you to do that for it, which means you can set your forward afterwards. So change the wrapping jquery from this:

$('#submit').click(function(){
    ... code ... 
});

to this:

$('#myForm').on('submit', function(event){ 
    event.preventDefault(); 
    ... code ... 
});

I would have put this in a snippet but SO throws exceptions if you try form submissions.

Answer 2

i hope this will help you out.. just save it as a seperate HTML page, but make sure to configure the two variables inside the script..

form name="redirect">
<center>
<font face="Arial"><b>You will be redirected to the script in<br><br>
<form>
<input type="text" size="3" name="redirect2">
</form>
seconds</b></font>
</center>

<script>
<!--

//change below target URL to your own
var targetURL="http://***********.com"
//change the second to start counting down from
var countdownfrom=10
var currentsecond=document.redirect.redirect2.value=countdownfrom+1
function countredirect(){
if (currentsecond!=1){
currentsecond-=1
document.redirect.redirect2.value=currentsecond
}
else{
window.location=targetURL
return
}
setTimeout("countredirect()",1000)
}
countredirect()
//-->
</script>