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?
Silvershaft 2 Junior Poster
macneato 29 Posting Pro in Training
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"
Silvershaft 2 Junior Poster
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
how to pass an array of values from a java script file to a php file?Please reply me
macneato 29 Posting Pro in Training
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>
</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
Silvershaft 2 Junior Poster
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
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
macneato 29 Posting Pro in Training
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
Silvershaft 2 Junior Poster
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
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 meeting, networking, learning, and sharing knowledge.