Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Dec 2006
    Posts
    417
    Thanks
    168
    Thanked 1 Time in 1 Post

    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 05:38 PM.

  • #2
    Senior Coder tomws's Avatar
    Join Date
    Nov 2007
    Location
    Arkansas
    Posts
    2,644
    Thanks
    29
    Thanked 330 Times in 326 Posts
    Code:
    $("loginForm").submit(function () {
    That's not a good selector, I think. It should probably look something like:
    Code:
    $("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.
    Are you a Help Vampire?

  • Users who have thanked tomws for this post:

    Bobafart (11-28-2009)

  • #3
    Regular Coder
    Join Date
    Dec 2006
    Posts
    417
    Thanks
    168
    Thanked 1 Time in 1 Post
    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?

  • #4
    Senior Coder tomws's Avatar
    Join Date
    Nov 2007
    Location
    Arkansas
    Posts
    2,644
    Thanks
    29
    Thanked 330 Times in 326 Posts
    Quote Originally Posted by Bobafart View Post
    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.
    Are you a Help Vampire?

  • Users who have thanked tomws for this post:

    Bobafart (11-29-2009)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •