Jump to content

ajax/jquery login problem.

Ibshas25

By Ibshas25
in Javascript Help

 Share

Recommended Posts

Ibshas25 Member

Ibshas25

Posted
Posted

i can get the validation working but for some reason thats all i am getting and even with the correct user name and password. am i missing something.  helpppp

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Ajax Login in php using jquery's fading effects</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script src="jquery.js" type="text/javascript" language="javascript"></script>

<script language="javascript">

 

$(document).ready(function()

{

$("#login_form").submit(function()

{

//remove all the class add the messagebox classes and start fading

$("#msgbox").removeClass().addClass('messagebox').text('Validating....').fadeIn(1000);

//check the username exists or not from ajax

$.post("jqueryPB_login.php",{ usr_username:$('#username').val(),usr_password:$('#password').val(),rand:Math.random() } ,function(data)

        {

  if(data=='yes') //if correct login detail

  {

  $("#msgbox").fadeTo(200,0.1,function()  //start fading the messagebox

{

  //add message and change the class of the box and start fading

  $(this).html('Logging in.....').addClass('messageboxok').fadeTo(900,1,

              function()

  {

  //redirect to secure page

document.location='jqueryPBsecurelog.php';

  });

 

});

  }

  else

  {

  $("#msgbox").fadeTo(200,0.1,function() //start fading the messagebox

{

  //add message and change the class of the box and start fading

  $(this).html('Your login detail is incorrect...').addClass('messageboxerror').fadeTo(900,1);

});

          }

 

        });

return false; //not to post the  form physically

});

//now call the ajax also focus move from

$("#password").blur(function()

{

$("#login_form").trigger('submit');

});

});

</script>

<style type="text/css">

body {

font-family:Verdana, Arial, Helvetica, sans-serif;

font-size:11px;

}

.top {

margin-bottom: 15px;

width: 250 px;

height: 180 px;

}

.buttondiv {

margin-top: 10px;

}

.messagebox{

position:absolute;

width:100px;

margin-left:30px;

border:1px solid #c93;

background:#ffc;

padding:3px;

}

.messageboxok{

position:absolute;

width:auto;

margin-left:30px;

border:1px solid #349534;

background:#C9FFCA;

padding:3px;

font-weight:bold;

color:#008000;

 

}

.messageboxerror{

position:absolute;

width:auto;

margin-left:30px;

border:1px solid #CC0000;

background:#F7CBCA;

padding:3px;

font-weight:bold;

color:#CC0000;

}

 

</style>

</head>

<body>

 

 

<br>

 

<br>

<form method="post" action="jqueryPB_login.php" id="login_form">

<div align="center">

<div class="top" >

  <p> </p>

  <img src="images/FINALlogo.jpg" width="60" height="50" /><p>Welcome to Project Book <strong style="color:#FF0000"></strong></p>

  </div>

 

<div >

  User Name : <input name="username" type="text" id="username" value="" maxlength="20" />

 

</div>

<div style="margin-top:5px" >

  Password :

      

    <input name="password" type="password" id="password" value="" maxlength="20" />

 

</div>

<div class="buttondiv">

    <input name="Submit" type="submit" id="submit" value="Login" style="margin-left:-10px; height:23px"  /> <span id="msgbox" style="display:none"></span>

 

</div>

 

</div>

</form>

</body>

</html>

 

php page

 

<?php session_start();

 

//Connect to your Database

  $conn = mysql_connect("vega.soi.city.ac.uk", "abhr428", "040010722")

or die("Could not connect to MySQL Server: " . mysql_error());

 

//Select your Database

  mysql_select_db("abhr428")

or die("Could not select database");

 

 

//get the posted values

$username = ($_POST['username']);

$password= ($_POST['password']);

 

//now validating the username and password

$sql="SELECT usr_username, usr_password FROM users WHERE usr_username='".$username."";

$result=mysql_query($sql);

$row=mysql_fetch_array($result);

 

//if username exists

if(mysql_num_rows($result)>0)

{

//compare the password

if(strcmp($row['usr_password'],$password)==0)

{

echo "yes";

//now set the session from here if needed

$_SESSION['usr_username']=$username;

}

else

echo "no";

}

else

echo "no"; //Invalid Login

 

 

?>

Link to comment
Share on other sites
Ibshas25 Member

Ibshas25

Posted
  • Author
Posted 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ajax Login in php using jquery's fading effects</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script src="jquery.js" type="text/javascript" language="javascript"></script>
<script language="javascript">

$(document).ready(function()
{
   $("#login_form").submit(function()
   {
      //remove all the class add the messagebox classes and start fading
      $("#msgbox").removeClass().addClass('messagebox').text('Validating....').fadeIn(1000);
      //check the username exists or not from ajax
      $.post("jqueryPB_login.php",{ usr_username:$('#username').val(),usr_password:$('#password').val(),rand:Math.random() } ,function(data)
        {
        if(data=='yes') //if correct login detail
        {
           $("#msgbox").fadeTo(200,0.1,function()  //start fading the messagebox
         { 
           //add message and change the class of the box and start fading
           $(this).html('Logging in.....').addClass('messageboxok').fadeTo(900,1,
              function()
           { 
               //redirect to secure page
             document.location='jqueryPBsecurelog.php';
           });
           
         });
        }
        else 
        {
           $("#msgbox").fadeTo(200,0.1,function() //start fading the messagebox
         { 
           //add message and change the class of the box and start fading
           $(this).html('Your login detail is incorrect...').addClass('messageboxerror').fadeTo(900,1);
         });      
          }
            
        });
       return false; //not to post the  form physically
   });
   //now call the ajax also focus move from 
   $("#password").blur(function()
   {
      $("#login_form").trigger('submit');
   });
});
</script>
<style type="text/css">
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
}
.top {
margin-bottom: 15px;
      width: 250 px;
      height: 180 px;      
}
.buttondiv {
margin-top: 10px;
}
.messagebox{
   position:absolute;
   width:100px;
   margin-left:30px;
   border:1px solid #c93;
   background:#ffc;
   padding:3px;
}
.messageboxok{
   position:absolute;
   width:auto;
   margin-left:30px;
   border:1px solid #349534;
   background:#C9FFCA;
   padding:3px;
   font-weight:bold;
   color:#008000;
   
}
.messageboxerror{
   position:absolute;
   width:auto;
   margin-left:30px;
   border:1px solid #CC0000;
   background:#F7CBCA;
   padding:3px;
   font-weight:bold;
   color:#CC0000;
}

</style>
</head>
<body>


<br>

<br>
<form method="post" action="jqueryPB_login.php" id="login_form">
<div align="center">
<div class="top" > 
  <p> </p>
  <img src="images/FINALlogo.jpg" width="60" height="50" /><p>Welcome to Project Book <strong style="color:#FF0000"></strong></p>
  </div>

<div >
   User Name : <input name="username" type="text" id="username" value="" maxlength="20" />

</div>
<div style="margin-top:5px" >
   Password :
      
    <input name="password" type="password" id="password" value="" maxlength="20" />
   
</div>
<div class="buttondiv">
    <input name="Submit" type="submit" id="submit" value="Login" style="margin-left:-10px; height:23px"  /> <span id="msgbox" style="display:none"></span>
   
</div>

</div>
</form>
</body>
</html>

php page

<?php session_start();

//Connect to your Database
  $conn = mysql_connect("vega.soi.city.ac.uk", "abhr428", "040010722") 
   or die("Could not connect to MySQL Server: " . mysql_error());

//Select your Database
  mysql_select_db("abhr428") 
   or die("Could not select database");


//get the posted values
$username = ($_POST['username']);
$password= ($_POST['password']);

//now validating the username and password
$sql="SELECT usr_username, usr_password FROM users WHERE usr_username='".$username."";
$result=mysql_query($sql);
$row=mysql_fetch_array($result);

//if username exists
if(mysql_num_rows($result)>0)
{
   //compare the password
   if(strcmp($row['usr_password'],$password)==0)
   {
      echo "yes";
      //now set the session from here if needed
      $_SESSION['usr_username']=$username; 
   }
   else
      echo "no"; 
}
else
   echo "no"; //Invalid Login


?>

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.