Javascript into php

Question

Silvershaft 2 Junior Poster

13 Years Ago

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?

javascript

3 Contributors
9 Replies
197 Views
1 Day Discussion Span
Latest Post 13 Years Ago Latest Post by Silvershaft

All 9 Replies

macneato 29 Posting Pro in Training

13 Years Ago

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"

macneato 29 Posting Pro in Training

13 Years Ago

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

macneato 29 Posting Pro in Training

13 Years Ago

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 13 Years Ago by macneato because: n/a

Reply to this topic

Be a part of the DaniWeb community

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

Silvershaft 2 Junior Poster · Answer 1 · 2010-07-14T16:26:22+00:00

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.

Kiruba Priya 0 Newbie Poster · Answer 2 · 2010-07-14T17:07:24+00:00

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

Silvershaft 2 Junior Poster · Answer 3 · 2010-07-14T18:40:58+00:00

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.

Silvershaft 2 Junior Poster · Answer 4 · 2010-07-14T20:03:38+00:00

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

Silvershaft 2 Junior Poster · Answer 5 · 2010-07-14T21:05:24+00:00

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>

Silvershaft 2 Junior Poster · Answer 6 · 2010-07-15T01:44:48+00:00

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?

Javascript into php

Recommended Answers Collapse Answers

All 9 Replies

Recommended Answers