Not sure why login form isn't working w/ JQuery

webguync · March 15, 2010

Hi,

I wanted to try out a PHP/MySQL/Jquery login form that I found code for online and integrate it for my needs, but can't get it to work. Not exactly sure where the script is failing for me ither. Any hints on debugging?

Code I am using below:

FORM

<!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 type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".loading").hide();
$(".message").hide();
$("#login_form").submit(function()
{
$(".login-form").hide();
$(".loading").fadeIn(200);

$.post("login.php",{ uname:$('#username').val(),pword:$('#password').val()} ,function(data)
{
$(".loading").hide();

if(data == '1')
{
$('.message').html('<p>Success - Redirecting...</p>');
window.location.replace("?secure-page");
}
else
{
$('.message').html('<p>Login Failed - Please Try Again</p>');
$(".login-form").fadeIn("slow");
}
$(".message").fadeIn("slow").delay(1000).fadeOut(1000);
});
return false;
});
});
</script>
<style type="text/css">
<!--
.login {
background-color: #9CF;
border-right-width: medium;
border-bottom-width: medium;
border-left-width: medium;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-right-color: #333;
border-bottom-color: #333;
border-left-color: #333;
text-align: center;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
color: #333;
padding: 10px;
margin-top: 100px;
margin-right: auto;
margin-left: auto;
border-top-width: medium;
border-top-style: solid;
border-top-color: #333;
width: 270px;
}
.message {
color: #333;
background-color: #F60;
border: 1px solid #F00;
padding: 2px;
font-family: Arial, Helvetica, sans-serif;
}
input {
border: 1px solid #333;
padding: 2px;
}
.top {
font-family: Arial, Helvetica, sans-serif;
color: #333;
background-color: #CCC;
position: absolute;
left: 5px;
top: 5px;
width: 746px;
}
-->
</style>



</head>
<body>


<div class="login">
<div class="message"></div>
<div class="loading"><img src="loading.gif" width="100" height="100" /></div>
<div class="login-form">
<form id="login_form" method="post" action="">
<table width="268" border="0">
<tr>
<td width="102">Username</td>
<td width="156">
<label>
<input type="text" name="username" id="username" />
</label>
</td>
</tr>
<tr>
<td>Password</td>
<td>
<label>
<input type="password" name="password" id="password" />
</label>
</td>
</tr>
<tr>
<td>Remember me?</td>
<td align="left"><label>
<input type="checkbox" name="checkbox" id="checkbox" />
</label></td>
</tr>
<tr>
<td> </td>
<td><label>
<input type="submit" name="button" id="button" value="Submit" />
</label></td>
</tr>
</table>
</form>
</div>
</div>

</body>
</html>

Login.php

<?php
$db_user = "username";
$db_pass = "pw";
$db = "db_name";

mysql_connect('localhost',$db_user,$db_pass);
mysql_select_db($db);

$username = mysql_real_escape_string($_POST['username']);
$password = mysql_real_escape_string(md5($_POST['pwid']));

$sql= "SELECT * FROM roster_March2010 WHERE username = '$username' AND pwid = '$password'";
$query = mysql_query($sql);
$num_rows = mysql_num_rows($query);

if ($num_rows == '1')
{
setcookie("logged_in", $username, time()+3600);
echo '1';
} else
{
echo '0';
}

?>

MySQL Table

CREATE TABLE `roster_March2010` (
  `name` text,
  `username` text,
  `pwid` varchar(10) default NULL,
  `user_id` int(11) NOT NULL auto_increment,
  PRIMARY KEY  (`user_id`)
) ENGINE=MyISAM AUTO_INCREMENT=4 DEFAULT CHARSET=utf8 AUTO_INCREMENT=4 ;

should be passing authentication, but I get the login failed message no matter what.

schilly · March 15, 2010

echo out your query and check for an sql error.

webguync · March 15, 2010

I added this bit, but I don't get a Query error

$query = mysql_query($sql) or die("Query Failed: $sql - " . mysql_error());

schilly · March 15, 2010

did you check the ajax response to make sure?

in your success just add:

alert(data);

or can use Safari Web Inspector or Firebug in Firefox.

webguync · March 15, 2010

sorry, but did you mean to add that here? (In the JQuery)

if(data == '1')
{

$('.message').html('<p>Success - Redirecting...</p>');
alert(data);
window.location.replace("?secure-page");
}

webguync · March 15, 2010

also, I have firebug installed on firefox. Where do I check for the response?

mattal999 · March 15, 2010

In login.php, you should have:

$username = mysql_real_escape_string($_POST['uname']);
$password = mysql_real_escape_string(md5($_POST['pword']));

As these are the field names you pass using AJAX.

schilly · March 15, 2010

In login.php, you should have:
$username = mysql_real_escape_string($_POST['uname']);
$password = mysql_real_escape_string(md5($_POST['pword']));
As these are the field names you pass using AJAX.

good catch. can't believe i missed that. that's likely the problem.

webguync · March 15, 2010

I should just be able to change the names of the fields in the AJAX right?

$.post("login.php",{ username:$('#username').val(),password:$('#password').val()} ,function(data)

still didn't work for me...

schilly · March 15, 2010

you php script uses "username" and "pwid":

$username = mysql_real_escape_string($_POST['username']);
$password = mysql_real_escape_string(md5($_POST['pwid']));

So you need to changed your Ajax variables to reflect that.

webguync · March 16, 2010

still isn't working for me, for some reason. Updated code

<!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 type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".loading").hide();
$(".message").hide();
$("#login_form").submit(function()
{
$(".login-form").hide();
$(".loading").fadeIn(200);

$.post("login.php",{ username:$('#username').val(),pwid:$('#pwid').val()} ,function(data)
{
$(".loading").hide();

if(data == '1')
{
$('.message').html('<p>Success - Redirecting...</p>');
window.location.replace("?secure-page");
}
else
{
$('.message').html('<p>Login Failed - Please Try Again</p>');
$(".login-form").fadeIn("slow");
}
$(".message").fadeIn("slow").delay(1000).fadeOut(1000);
});
return false;
});
});
</script>
<style type="text/css">
<!--
.login {
   background-color: #9CF;
   border-right-width: medium;
   border-bottom-width: medium;
   border-left-width: medium;
   border-right-style: solid;
   border-bottom-style: solid;
   border-left-style: solid;
   border-right-color: #333;
   border-bottom-color: #333;
   border-left-color: #333;
   text-align: center;
   font-size: 14px;
   font-family: Arial, Helvetica, sans-serif;
   color: #333;
   padding: 10px;
   margin-top: 100px;
   margin-right: auto;
   margin-left: auto;
   border-top-width: medium;
   border-top-style: solid;
   border-top-color: #333;
   width: 270px;
}
.message {
   color: #333;
   background-color: #F60;
   border: 1px solid #F00;
   padding: 2px;
   font-family: Arial, Helvetica, sans-serif;
}
input {
   border: 1px solid #333;
   padding: 2px;
}
.top {
   font-family: Arial, Helvetica, sans-serif;
   color: #333;
   background-color: #CCC;
   position: absolute;
   left: 5px;
   top: 5px;
   width: 746px;
}
-->
</style>



</head>
<body>


<div class="login">
<div class="message"></div>
<div class="loading"><img src="loading.gif" width="100" height="100" /></div>
<div class="login-form">
<form id="login_form" method="post" action="">
<table width="268" border="0">
<tr>
<td width="102">Username</td>
<td width="156">
<label>
<input type="text" name="username" id="username" />
</label>
</td>
</tr>
<tr>
<td>Password</td>
<td>
<label>
<input type="password" name="pwid" id="pwid" />
</label>
</td>
</tr>
<tr>
<td>Remember me?</td>
<td align="left"><label>
<input type="checkbox" name="checkbox" id="checkbox" />
</label></td>
</tr>
<tr>
<td> </td>
<td><label>
<input type="submit" name="button" id="button" value="Submit" />
</label></td>
</tr>
</table>
</form>
</div>
</div>

</body>
</html>

<?php
$db_user = "username";
$db_pass = "password";
$db = "DB";

mysql_connect('localhost',$db_user,$db_pass);
mysql_select_db($db);

$username = mysql_real_escape_string($_POST['username']);
$pwid = mysql_real_escape_string(md5($_POST['pwid']));

$sql= "SELECT * FROM roster_March2010 WHERE username = '$username' AND pwid = '$pwid'";
$query = mysql_query($sql) or die("Query Failed: $sql - " . mysql_error());
$num_rows = mysql_num_rows($query);

if ($num_rows == '1')
{
setcookie("logged_in", $username, time()+3600);
echo '1';
} else
{
echo '0';
}

?>

schilly · March 16, 2010

Open up Firebug and go to the console (console must be open before you load the page) and it will show you the ajax calls. Click on the ajax URL in the console and it will show you the response. Let us know what it's returning.

webguync · March 16, 2010

it just returns a '0' when you click on the response tab.

schilly · March 16, 2010

put a

echo $sql;

after your $sql definition then check the response to see what it looks like. run it in phpmyadmin or mysql query browser if you have it to see if the result set looks right.

schilly · March 16, 2010

this may or may not fix the issue.

if ($num_rows == '1')

mysql_num_rows returns an int and your are checking against a string. php may understand what you're trying to do and do the conversion for you but for good coding practise, you should do:

if ($num_rows == 1)

webguync · March 16, 2010

yea I tried

if ($num_rows == 1)

and also echo $sql and neither worked. With the echo of the sql nothing appears after I hit the submit on the login, I just get the error from the JQuery call.

schilly · March 16, 2010

not exactly sure why you would get a js error.

what is the error?

the sql should just show in the response with the 0 or 1.

you might want to test your login script without ajax first to make sure it works properly.

webguync · March 17, 2010

yea, I meant I get the error invalid login,which is what the JQuery is producing since everything is evaluating to 0

else
{
$('.message').html('<p>Login Failed - Please Try Again</p>');
$(".login-form").fadeIn("slow");
}

even though should be working, I will try w/o the JQuery as you suggested.

schilly · March 17, 2010

oh just the error case.

did you look in firebug to see if the sql was in the response?

or another option i used when testing ajax scripts was to just use mail() and mail myself debug code.

webguync · March 17, 2010

can you further explain mail() and how that works, where I would need to put it etc?

schilly · March 17, 2010

so in your php script just do something like this after you sql call:

$sql= "SELECT * FROM roster_March2010 WHERE username = '$username' AND pwid = '$password'";
$query = mysql_query($sql);
$num_rows = mysql_num_rows($query);
mail("email@domain.com","ajax debug","$sql\n\n mysql num rows = $num_rows");

now you should get an email of the query it ran and the number of rows it returned. with this you can test it yourself on your database to make sure it actually returns a result.

webguync · March 17, 2010

thanks, that is cool!

I think the problem is the password is being scrambled, the output that was emailed was:

SELECT * FROM roster_March2010 WHERE username = 'email@domain.com' AND pwid = '8a1863316dc431ff2dab1e9126594bf6'

schilly · March 17, 2010

well you md5()'d the password so it should be scrambled.

webguync · March 17, 2010

but in the database it isn't scrambled so it's not returning a result, should I just take out md5 part?

schilly · March 17, 2010

you should really be storing your passwords as some kind of hash in the db so if someone hacks your db they can't see what the passwords are.

Sign In

Not sure why login form isn't working w/ JQuery

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information