JQuery: Trying to make a Login Form

[Bobafart]

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:

<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:

<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")

// 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

[tomws]

$("loginForm").submit(function () {

That's not a good selector, I think. It should probably look something like:

$("form [name='loginForm']").submit(function () {

That's for problem #2. However, if it's correct, then the submit handler should have never fired on form submission. That means the backside should never have been called in the first place and no data would have been passed.

Try the selector change and see what happens.

[Bobafart]

thanks tomws for answering but it didn't work

it would appear that the problem is simple: it only works with the method: GET, not POST

the problem then is that the person's username and password end up in the URL.

Is there a way to send JQuery AJAX variables to the server side script using POST instead of GET?

[tomws]

Originally Posted by Bobafart

Is there a way to send JQuery AJAX variables to the server side script using POST instead of GET?

Yes. That's what $.post() is for. Have you dropped in some alert()s for debugging? Check to make sure you're actually getting into the submit handler and that you're getting the data there. Also, the return false; should be outside of the $.post function but inside the submit handler.

I just noticed, you're passing the data in JSON format. If you want to use JSON, you'll need to convert on the backside before accessing the data. See json_decode. If not interested in JSON, remove that last argument from the $.post function.