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?

Recommended Answers

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=" …
Jump to Post

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="
Jump to Post

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);
		   } …
Jump to Post

All 9 Replies

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"

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.

how to pass an array of values from a java script file to a php file?Please reply me

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

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.

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

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

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>

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?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.