Hello all,
How is it possible to login a form using javascript, without refreshing the page?
thank you,
You use Ajax and send the user’s login name and password via an XMLHttpRequest. Then the server processes this information and probably sets a session cookie. Then it sends back some information that is processed by the JavaScript. The difficulty is that normally you will want to refresh the page anyway, because the content for logged-in users is typically quite different (and personal).
There are lots of tutorials and articles out there covering this topic:
I worked on a code. user can be entered without refreshing page.But when after entering, but with refresh page user logout.
i want the user When click on link exit, logout.
How can this problem be solved?
Codes were attached
html code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Modal Ajax Login Form</title>
<script type="text/javascript" src="javascript/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="javascript/jquery.simplemodal.js"></script>
<script type="text/javascript" src="javascript/init.js"></script>
<link type='text/css' href='style/stylesheet.css' rel='stylesheet' media='screen' />
</head>
<body>
<div id="login_form">
<div id="status">
<center><h1><img src="images/key.png" align="absmiddle"> LOGIN</h1>
<div id="login_response"><!-- spanner --></div> </center>
<form id="login" action="javascript:alert('success!');">
<input type="hidden" name="action" value="user_login">
<input type="hidden" name="module" value="login">
<label>E-Mail</label><input type="text" name="email"><br />
<label>Password</label><input type="password" name="password"><br />
<label>Remember Me<input type="checkbox" name="remember_me" value="1"><br />
<label> </label><input value="Login" name="Login" id="submit" class="big" type="submit" />
<div id="ajax_loading">
<img align="absmiddle" src="images/spinner.gif"> Processing...
</div>
</form>
</div>
</div>
</body>
</html>
php code:
<?php
$config = array();
$config['email'] = 'demo@demo.com';
$config['password'] = 'demo123';
// Show all errors except the notice ones
error_reporting(E_ALL ^ E_NOTICE);
// Initialize session
session_id();
session_start();
header('Cache-control: private'); // IE 6 FIX
if($_POST['action'] == 'user_login')
{
$post_email = $_POST['email'];
$post_password = $_POST['password'];
// check username and password
if($post_email == $config['email'] && $post_password == $config['password'])
{
// No error? Register the session & redirect the user to his/her 'Control Panel'
$_SESSION['username'] = $post_email;
if($_POST['remember_me'])
{
// set the cookies for 1 month
setcookie ("remember_me", true, (time() + TIME_DIFF) + (3600 * 24 * 30));
setcookie ("info", $user_id.','.md5($password), (time() + TIME_DIFF) + (3600 * 24 * 30));
}
echo 'OK'; // this response is checked in 'process-login.js'
}
else
{
$auth_error = '<div id="notification_error">The login info is not correct.</div>';
echo $auth_error;
}
}
?>
js cod:
$(function() {
$('.error').hide();
$('input.text-input').css({backgroundColor:"#FFFFFF"});
$('input.text-input').focus(function(){
$(this).css({backgroundColor:"#FFDDAA"});
});
$('input.text-input').blur(function(){
$(this).css({backgroundColor:"#FFFFFF"});
});
$(".button").click(function() {
// validate and process form
// first hide any error messages
$('.error').hide();
var name = $("input#name").val();
if (name == "") {
$("label#name_error").show();
$("input#name").focus();
return false;
}
var email = $("input#email").val();
if (email == "") {
$("label#email_error").show();
$("input#email").focus();
return false;
}
var phone = $("input#phone").val();
if (phone == "") {
$("label#phone_error").show();
$("input#phone").focus();
return false;
}
var dataString = 'name='+ name + '&email=' + email + '&phone=' + phone;
//alert (dataString);return false;
$.ajax({
type: "POST",
url: "bin/process.php",
data: dataString,
success: function() {
$('#contact_form').html("<div id='message'></div>");
$('#message').html("<h2>Contact Form Submitted!</h2>")
.append('<div id="logged_in">' +
'<div style="width: 350px; float: left; margin-left: 70px;">' +
'<div style="width: 40px; float: left;">' +
'<a href="login.php">logout</a>' +
'</div>' +
'<div style="margin: 10px 0px 0px 10px; float: right; width: 300px;">'+
"You are successfully logged in! <br /> Please wait while you're redirected...</div></div>")
.hide()
.fadeIn(1500, function() {
$('#message').append("<img id='checkmark' src='images/check.png' />");
});
}
});
return false;
});
});
runOnLoad(function(){
$("input#name").select().focus();
});
How can this problem be solved?
your form runs an alert() for the form action which doesn’t make sense to me and I don’t see where your php code is executed :confused2:
did you write all this code?
no, use from tutorial : http://www.bitrepository.com/ajax-login-modal-box.html
this is my code : http://www.mediafire.com/?s6qp3z26z73pyt0
ok, so
-
why are you running javascript as the action for the form
-
where are you passing the user login data to the php script?
Thanks!
What you mean these questions?Please see the codes
I do not know much ajax or javascripet. Could you edit my code and explain?
Is it is secure to authenticate a user using javascript or ajax?
There may be a misunderstanding going on here.
These forums are not a dumping ground for non-working code where cobblers and gremlins hammer away night and day to turn it back again in to good code.
Instead, we try to make these forums a learning place, where people can come along to find out what they aren’t understanding too well, so that they can learn more about how to solve their problems themself.
So, are you more interested in finding someone to just “make it work”, or would you like us to explain to you the issues that your code is facing?
Personally i would never use Ajax authentication unless the data is been sent to a secure page running on a HTTPS/SSL connection