Upon entering correct username/password, login success appears. I want to redirect to different page upon successful login, but window.location.href not working.

index.html

<form id="myFormlogin" action="login.php" method="POST">
    Email:
    <input type="text" name="usernamelogin" />
    <br />Password:
    <input type="password" name="passlogin" />
    <br />
    <button id="login">login</button>
</form>
<div id="ack"></div>
<script type="text/javascript" src=".min.js"></script>
<script type="text/javascript" src="my_script.js"></script>

login.php

<?php
include_once('db.php');

$username = mysql_real_escape_string($_POST["usernamelogin"]);
$password = mysql_real_escape_string(md5($_POST["passlogin"]));

$sql    = "SELECT * FROM registered_users WHERE username='$username' and password='$password'";
$result = mysql_query($sql);
if ($result) {
    echo "login success";
} else {
    echo "Wrong Username or Password";
}
?>

script.js

("#login").click( function() {

if( $("#usernamelogin").val() == "" || $("#passlogin").val() == "" )
      $("#ack").html("Username/Password are mandatory fields -- Please Enter.");
    else
          window.location.href = "/";
});   

Upon entering correct username/password, login success appears. I want to redirect to different page upon successful login, but window.location.href not working.

index.html

<form id="myFormlogin" action="login.php" method="POST">
    Email:
    <input type="text" name="usernamelogin" />
    <br />Password:
    <input type="password" name="passlogin" />
    <br />
    <button id="login">login</button>
</form>
<div id="ack"></div>
<script type="text/javascript" src="https://ajax.googleapis./ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="my_script.js"></script>

login.php

<?php
include_once('db.php');

$username = mysql_real_escape_string($_POST["usernamelogin"]);
$password = mysql_real_escape_string(md5($_POST["passlogin"]));

$sql    = "SELECT * FROM registered_users WHERE username='$username' and password='$password'";
$result = mysql_query($sql);
if ($result) {
    echo "login success";
} else {
    echo "Wrong Username or Password";
}
?>

script.js

("#login").click( function() {

if( $("#usernamelogin").val() == "" || $("#passlogin").val() == "" )
      $("#ack").html("Username/Password are mandatory fields -- Please Enter.");
    else
          window.location.href = "http://jsfiddle/";
});   

• php
• javascript
• jquery
• html

4 Answers 4

Use id instead of name

chnage your code as

Email: <input type="text" id="usernamelogin"/><br />
Password: <input type="password" id="passlogin"/><br />

instead of

Email: <input type="text" name="usernamelogin"/><br />
Password: <input type="password" name="passlogin"/><br />

And use return false to prevent default action

$("#login").click(function () {
    if ($("#usernamelogin").val() == "" || $("#passlogin").val() == "")
        $("#ack").html("Username/Password are mandatory fields -- Please Enter.");
    else 
        window.location.href = "http://www.google.";
    return false;
});

Demo: http://jsfiddle/satpalsingh/SzhbM/

I suspect the form may be submitting. Try preventing the default action of the form.

$("#login").click( function(e) {
  e.preventDefault();
  if( $("#usernamelogin").val() == "" || $("#passlogin").val() == "" )
        $("#ack").html("Username/Password are mandatory fields -- Please Enter.");
  else
  window.location.href = "http://google.";         

});

First of all use ID selector instead of name. so add ID in both input :

Email: <input type="text" name="usernamelogin" id="usernamelogin"/><br />
Password: <input type="password" name="passlogin" id="passlogin"/><br />

Then change function to :

$(document).ready(function(){
    $("#login").click( function() {
        if( $("#usernamelogin").val() == "" || $("#passlogin").val() == "" )
            $("#ack").html("Username/Password are mandatory fields -- Please Enter.");
            return false;
        else
            window.location.href = "http://google.";         
            return false;
    });
});

And set return false that will prevent default action.

Wrap code inside $(document).ready(); and also user preventDefault so it will execute only defined code.

Example

$("#login").click( function(e)
{
    e.preventDefault();

Also you are using if( $("#usernamelogin").val() == "" || $("#passlogin").val() == "" ) this code but you forget to assign ID to the input fields.

And that is why jQuery was unable to find that two fields and stop executing script further.

You can check it in firebug.

Comment Code Response

Made below changes in index.html page.

<form id="myFormlogin" action="login.php" method="POST">
    Email: <input type="text" id="usernamelogin" name="usernamelogin"/><br />
    Password: <input type="password" id="passlogin" name="passlogin"/><br />
    <button id="login">login</button>
</form>

what i did is added name attribute for the input fields.

replace your mys_script.js with below code

$(function()
{
    $("#submit").click( function()
    {
        if( $("#username").val() == "" || $("#pass").val() == "" )
        {
            $("#ack").html("Username/Password are mandatory fields -- Please Enter.");
        }
        else
        {
            $.ajax({
                url         :   $('#myForm').attr('action'),
                data        :   $('#myForm').serialize(),
                success     :   function(info)
                {
                    $("#ack").empty();
                    $("#ack").html(info);
                    clear();
                }
            });
        }
    });

    function clear()
    {
        $("form :input").each( function() {
            $(this).val("");
        });
    }

    $("#login").click( function()
    {
        if( $("#usernamelogin").val() == "" || $("#passlogin").val() == "" )
        {
            $("#ack").html("Username/Password are mandatory fields -- Please Enter.");
        }
        else
        {
            $.ajax({
                url         :   $('#myFormlogin').attr('action'),
                data        :   $('#myFormlogin').serialize(),
                success     :   function(info)
                {
                    $("#ack").empty();
                    $("#ack").html(info);
                    clear();
                }
            });
        }
    });
});

and finally make changes in your login.php file as below,

<?php
include_once('db.php');
$username = mysql_real_escape_string( $_POST["usernamelogin"] );
$password = mysql_real_escape_string( md5($_POST["passlogin"]) );

$sql="SELECT * FROM registered_users WHERE username='$username' and password='$password'";
$result=mysql_query($sql)or die(mysql_error());   
$count = mysql_num_rows($result);


if($count==1)
{
    echo "found user";
}
else
{
    echo "Wrong Username or Password";
}
?>