View Single Post
Old 11-28-2009, 04:35 PM   PM User | #1
Bobafart
Regular Coder

 
Join Date: Dec 2006
Posts: 416
Thanks: 168
Thanked 1 Time in 1 Post
Bobafart is on a distinguished road
JQuery: Trying to make a Login Form

I realize there are lots of tutorials posted on how to make a JQ login form. Unfortunately none that i have googled address the two problems I am having:

My JS Code which is in the head of my login form:

Code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){	    
		$("#loginResult").hide();
		$("loginForm").submit(function () {
		$.post("ajax_logincheck.php", { radusername:$('[name=radusername]').val(),radpassword:$('#radpasswordfield').val() },
			function(data){
				if(data.success){
				   alert(data.message);
				}
				process(data);
				}, "json");
			$("#loginResult").show("slow");
		     $("#loginForm").hide("slow");
			 return false;
	    });
	});				
	</script>

My login form:

Code:
<form action="login.php" method="post" name="loginForm">
Form">
<p>username: <input id="radusernamefield" type="text" name="radusername" /></p>
<p>password: <input id="radpasswordfield" type="text" name="radpassword" /></p>
<input id="submitButtonLoginForm" type="submit" value="login" name="submitButtonLoginForm">
<div id="loginResult"></div>
</form>
My serverside code in PHP (file "ajax_logincheck.php")

Code:
// mySQL username/password connection code omitted for obvious reasons

$radusername = htmlspecialchars($_POST['radusername'],ENT_QUOTES);
$radpassword = $_POST['radpassword'];
$radpassword=md5($radpassword); 
echo '<p>raduser: '.$radusername .' radpass: '.$radpassword.'</p>';
// values are blank in the above output statement

$sqlUserCheck="SELECT * FROM tbl_user WHERE username = '".$radusername."' LIMIT 1";
echo '<p>'.$sqlUserCheck.'</p>';
$resultUserCheck = mysql_query($sqlUserCheck);
//if username exists
if(mysql_num_rows($resultUserCheck)>0){
$mysqlusernamecheck=mysql_result($resultUserCheck,0,"username");
$mysqlpasswordcheck=mysql_result($resultUserCheck,0,"password");
if ($radusername == $mysqlusernamecheck){
    //compare the password
    if(strcmp($mysqlpasswordcheck,$radpassword)==0){
        //successful login, now set the session from here if needed
        $_SESSION['radusername']=$mysqlusernamecheck;
		// json data
		$data['success']=true;
		$data['redirect']= '/dashboard.php';
		$data['message'] = "Your info is correct!";
	}else{
		// failed login due to incorrect info
		$data['success'] = false;
		$data['message'] = "Your info is wrong...";
		
	}
}else{
	print "<strong>Login failed! Please try again.</strong>";
}
}
The problems I am having are two:

Problem 1: Unable to pass the username and password to the ajax file
Despite using the .post func in JS I am unable to pass the values of the username and password to the serverside ajax file: "ajax_logincheck.php".

You will notce that in my .post() I use two different ways to submit the parameters: radusername:$('[name=radusername]').val(),radpassword:$('#radpasswordfield').val() I have tried keeping them the same, trading them around and nothing seems to work.


Problem 2: Form still submits oldschool even if JS is enabled
I have the form set up so that it still submits for users who don't have JS enabled browsers.

Problem is, even though I use "return false;" in my $.post() the form still submits and the page refreshes even though my browser has JS enabled.

Can someone please give me advise?

thanks

Last edited by Bobafart; 11-28-2009 at 04:38 PM..
Bobafart is offline   Reply With Quote