0

Hey! I got a little login script, like when user presses the button it sends the form and does the php code to check the account, what I want to do is if the password or username is wrong, that the user will be redirected to loginpage and I want to display message with javascript that the password/username was wrong. How should I actually do this?

3
Contributors
9
Replies
10
Views
7 Years
Discussion Span
Last Post by Silvershaft
0

You could use ajax to do the login check and echo wether or not login was successful with an if statement.

So something along these lines

// Varibles that hold userinfo
var username = $('#UserName').attr('value');
var password = $('#UserPassword').attr('value');

$.ajax({
    type: "POST",
    url: "php/process_login.php",
    data: "username=" + username + "& password=" + password,
    success: function(){
		alert('Success')
    },
    error: function(){
        alert('failure');
    }
}, function(data){
    $(".error").html(data);
});

Then we will use "process_login.php" to fetch the data

$userName= $_POST['UserName'];
$userPass= $_POST['UserPassword'];

Process the login using the above varibles as you normally would. Then use an if statement to either login or echo an error.

<?php
if ($login == "succesful") {
	header ('Location: hxxp://yoursite/memeberarea');
	exit ();	
} else {
	echo "Your login information was incorrect.";
}
?>

The echoed string will appear in the class we specified earlier. "error"

0

So I put my error code to the error function or something? Does ajax like know when it fails and when it succeeds? Sorry I noob with these.

0

Na, thats just to get an error if that ajax isn't sent succesfully. We gonna add the error to the error class. View below (read comments)

<html>
    <head>
        <title>Login</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js" type="text/javascript">
        </script>
        <script>
            $(document).ready(function(){
                $(".loginBtn").click(function(){
                    // Varibles that hold userinfo
                    var username = $('#UserName').attr('value');
                    var password = $('#UserPassword').attr('value');
                    
                    $.ajax({
                        type: "POST",
                        url: "php/process_login.php",
                        data: "username=" + username + "& password=" + password,
                        success: function(){
                            alert('Success')
                        },
                        error: function(){
                            alert('failure');
                        }
                    }, function(data){
                        $(".error").html(data);
                    });
                });
            });
        </script>
    </head>
    <body>
        <form id="loginForm" name="loginForm" action="#">
        	<div class="error" style="color:red"></div>  <!-- if there is an error, it will be displayed in this div -->
            <table width="300" border="0" align="center" cellpadding="2" cellspacing="0">
                <tr>
                    <td width="112">
                        <b>Login</b>
                    </td>
                    <td width="188">
                        <input name="login" type="text" class="textfield" id="UserName" /> <!-- username value is taken from here -->
                    </td>
                </tr>
                <tr>
                    <td>
                        <b>Password</b>
                    </td>
                    <td>
                        <input name="password" type="password" class="textfield" id="UserPassword" /> <!-- note the id, we get the pass value from here -->
                    </td>
                </tr>
                <tr>
                    <td>
                        &nbsp;
                    </td>
                    <td>
                        <input type="submit" name="Submit" value="Login" class="loginBtn" />
                    </td>
                </tr>
            </table>
        </form>
    </body>
</html>

and the php will be along these lines

<?php 
include (config.php); // This should link to your mysql db config

/* Something like below 
 
 $username="root";
 $password="";
 $database="users";
 mysql_connect("localhost",$username,$password);
 @mysql_select_db($database) or die( "Unable to select database");
 
 */


// We fetch the data that was posted via ajax
$userName = $_POST['UserName']; //username
$userPass = $_POST['UserPassword']; //password


//Create query to see if username matches password
$qry = "SELECT * FROM users WHERE username='$userName' AND password='$userPass'";
$result = mysql_query($qry);

//Check whether the query was successful or not
if ($result) {
    // if there was a match
    if (mysql_num_rows($result) == 1) {
        header('Location: hxxp://yoursite/memeberarea'); // redirect user
        exit();
        // if there wasnt
    } else {
        echo "Your login information was incorrect."; // echo this error to "error" class we defined in jquery
    }
}
?>

Hope that makes alot more sense

0

I want to like display a javascript effect when the login fails, I use the scriptaculous thing, like when the error comes div rolls down.

0

I did like thid.. But it somehow won't work..

function checkLogin()
{
	var username = $('#username').attr('value');
	var password = $('#password').attr('value');
	alert(username);
	
	$.ajax({
		   type: "POST",
		   url: "check.php",
		   data: "username=" + username + "& password=" + password,
		   success: function() {
			   alert('Success')
		   },
		   
		   error: function() {
			   alert('failure');
		   },
		   function(data) {
			   $('error').html(data);
		   }
	});
	
}

My button calls that function when pressed but it won't somehow

0

Thats easy with jquery, could just chain some animations. E.g

var username = $('#username').attr('value');
	var password = $('#password').attr('value');
	alert(username);
	
	$.ajax({
		   type: "POST",
		   url: "check.php",
		   data: "username=" + username + "& password=" + password,
		   success: function() {
			   alert('Success')
		   },
		   
		   error: function() {
			   alert('failure');
		   },
		   function(data) {
			   $('.error').slideDown('slow').html(data);
		   }
	});

Could you post your click event

Edited by macneato: n/a

0

When I add the ajax code it doesn't seem to work correctly I don't understand why.. When the ajax thing is in place the button won't even do the event.. I wondeer if there is something wrong with my ajax code.. here is it

function checkLogin()
{
	var username = $('#username').attr('value');
	var password = $('#password').attr('value');
	alert(username);
	
	$.ajax({
		   type: "POST",
		   url: "check.php",
		   data: "username=" + username + "& password=" + password,
		   success: function() {
			   alert('Success')
		   },
		   
		   error: function() {
			   alert('failure');
		   },
		   function(data) {
			   $('error').html(data);
		   }
	});
	
}

Here is the button

<a href="#" onclick="checkLogin()" 
            "><img src="images/login2.png" name="submitbtn" border=0 alt="Submit" style="width:25%; height:30px;"  /></a></p>
0

I don't know something is wrong with my ajax code thing, can someone tell if it's correct as I haven't done any before?

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.