Solved

login is not working in ajax??

Posted on 2009-07-11
20
222 Views
Last Modified: 2012-08-13
do i need to rename my pages??

i am pasting my login.js file here and other php files in the code snippet because code of login.js seems to be big but it is very very easy and basic.

login.js
function createObject() {
      var request_type;
      var browser = navigator.appName;
      if(browser == "Microsoft Internet Explorer"){
            request_type = new ActiveXObject("Microsoft.XMLHTTP"); }
      else{
            request_type = new XMLHttpRequest(); }
      return request_type; }
var http = createObject();

function mylogin() {
      alert("hi")
      var username = encodeURI(document.getElementById('username').value);
      var password = encodeURI(document.getElementById('password').value);
      http.open('get', 'login.php?username='+username+'&password='+password);
      http.onreadystatechange = function(){
       if(http.readyState == 4){
            var response = http.responseText;
            var res = response.replace(/^\s+|\s+$/, '');
            alert(res)
            if(res == "no"){
                        document.getElementById('login').innerHTML = 'Login Failed';
                        document.getElementById('loginform').style.display = 'block';
            } else {
                        document.getElementById('login').innerHTML = response;
                        document.getElementById('loginform').style.display = 'none';
            }
      } }
      http.send(null); }

function mylogout(){
      document.getElementById('loginform').style.display = 'none';
      http.open('get','logout.php', true);
      http.onreadystatechange = function(){
      if(http.readyState == 4){
            var response = http.responseText;
            document.getElementById('logout').innerHTML = response;
            document.getElementById('logout').style.display = 'block';
            } }
      http.send(null); }

function dropdownlist(){
      http.open('get','dropdownlist.php', true);
      http.onreadystatechange = function(){
      if(http.readyState == 4){
            var response = http.responseText;
            document.getElementById('dropdownlist').innerHTML = response;
            document.getElementById('dropdownlist').style.display = 'block';
            } }
      http.send(null); }
config.php
<?php session_start(); $db_host="localhost"; $db_name="session_cms_ajax"; $username="root"; $password="";
	$db_con=mysql_connect($db_host,$username,$password) or die("connection not build".mysql_error());
	$db=mysql_select_db($db_name) or die("database not build".mysql_error()); ?>
 
login.php
<?php include('config.php'); ?>
<script type="text/javascript" language="javascript" src="login.js"></script>
<div id="login"></div> <div id="loginform">
<form>Username<input name="username" type="text" id="username" />Password<input name="password" type="password" id="password" />
	<input type="button" name="login" value="Login" onclick="mylogin();" /></form>
</div> <div id="dropdownlist"></div><div id="logout"></div>
 
index.php
<?php 
include('config.php'); 
if(isset($_SESSION['loggedin'])){
$username = $_GET['username']; $password = $_GET['password'];
$sql = 'select count(*) as total from login where username="'. $username . '" and password = "' . $password . '"';
$query = mysql_query($sql); $rec = mysql_fetch_assoc($query); $num_rows = intval($rec['total']);
if( $num_rows > 0){
	$_SESSION['loggedin'] = 1 ; ?> <div id="login"><a href="javascript:dropdownlist();"><?php echo $username; ?></a></div> 
	<form><input type="button" name="logout" value="Logout" onclick="mylogout();" /></form>
	<?php } else{ echo "no"; } 
} else{
header('location: login.php');
} ?>
 
dropdownlist.php
<?php include('config.php'); if(isset($_SESSION['loggedin'])){ echo "i am in dropdownlist page. This is my private page."; } ?>
<form><input type="button" name="logout" value="Logout" onclick="mylogout();" /></form>
 
logout.php
<?php
include('config.php'); session_destroy(); $_SESSION['loggedin'] = 0 ; ?>
<form>Username<input name="username" type="text" id="username" />Password<input name="password" type="password" id="password" />
<input type="button" name="login" value="Login" onclick="mylogin();" /></form>

Open in new window

0
Comment
Question by:designersx
  • 15
  • 5
20 Comments
 
LVL 20

Expert Comment

by:Gawai
ID: 24830025
make sure login.js is located in same folder . let us know the url of your site to check the exact issue
0
 

Author Comment

by:designersx
ID: 24830063
0
 
LVL 20

Expert Comment

by:Gawai
ID: 24830146
0
ScreenConnect 6.0 Free Trial

Explore all the enhancements in one game-changing release, ScreenConnect 6.0, based on partner feedback. New features include a redesigned UI, app configurations and chat acknowledgement to improve customer engagement!

 

Author Comment

by:designersx
ID: 24830152
sir simple login i have already done. i wanted to do with session. i do not want to use the jquery in this.

i am giving u my latest code which i am trying to do and update on the server. wait for a second.
0
 

Author Comment

by:designersx
ID: 24830186
i have changed the file names and a little code also.
index1.php
<?php include('config.php'); ?>
<script type="text/javascript" language="javascript" src="login.js"></script>
<div id="login"></div> 
<div id="loginform">
<form>
Username<input name="username" type="text" id="username" />
Password<input name="password" type="password" id="password" />
<input type="button" name="login" value="Login" onclick="mylogin();" />
</form>
</div>
<div id="dropdownlist"></div>
<div id="logout"></div>
 
login.php
<?php
include('config.php');
 
$username = $_GET['username']; 
$password = $_GET['password'];
 
$sql = 'select count(*) as total from login where username="'. $username . '" and password = "' . $password . '"';
$query = mysql_query($sql); 
$rec = mysql_fetch_assoc($query); 
$num_rows = intval($rec['total']);
 
if($num_rows > 0){
	$_SESSION['loggedin'] = 1 ; ?>
	<a href="javascript:dropdownlist();"><?php echo $username; ?></a>
	<form><input type="button" name="logout" value="Logout" onclick="mylogout();" /></form>
<?php
}
else{
	echo "no";
}
?>
 
logout.php
<?php
include('config.php');
session_destroy();
$_SESSION['loggedin'] = 0 ;
?>
 
config.php
<?php
	session_start();
	$db_host="localhost";
	$db_name="session_cms_ajax";
	$username="root";
	$password="";
	$db_con=mysql_connect($db_host,$username,$password) or die("connection not build".mysql_error());
	$db=mysql_select_db($db_name) or die("database not build".mysql_error());
?>
 
dropdownlist.php
<?php include('config.php');
if(isset($_SESSION['loggedin'])){
	echo "i am in dropdownlist page. This is my private page.";
}
?>
<form><input type="button" name="logout" value="Logout" onclick="mylogout();" /></form>

Open in new window

0
 

Author Comment

by:designersx
ID: 24830191
login.js
login.js
function createObject() {
	var request_type;
	var browser = navigator.appName;
	if(browser == "Microsoft Internet Explorer"){
		request_type = new ActiveXObject("Microsoft.XMLHTTP"); }
	else{
		request_type = new XMLHttpRequest(); }
	return request_type; }
var http = createObject();
 
function mylogin() {
	//alert("hi")
	var username = encodeURI(document.getElementById('username').value);
	alert(username)
	var password = encodeURI(document.getElementById('password').value);
	alert(password)
	http.open('get', 'login.php?username='+username+'&password='+password);
	http.onreadystatechange = function(){
	 if(http.readyState == 4){
		var response = http.responseText;
		var res = response.replace(/^\s+|\s+$/, '');
		alert(res)
			if(res == "no"){
					//alert("no")
					document.getElementById('login').innerHTML = 'Login Failed';
					document.getElementById('login').style.display = 'block';
					document.getElementById('loginform').style.display = 'block';
			} else {
					//alert("yes")
					document.getElementById('login').innerHTML = response;
					document.getElementById('login').style.display = 'block';
					document.getElementById('loginform').style.display = 'none';
			}
		}
	}
	http.send(null); 
	}
 
function mylogout(){
	document.getElementById('loginform').style.display = 'none';
	http.open('get','logout.php', true);
	http.onreadystatechange = function(){
	if(http.readyState == 4){
		var response = http.responseText;
		document.getElementById('logout').innerHTML = response;
		document.getElementById('logout').style.display = 'block';
		}
	}
	http.send(null); 
}
 
function dropdownlist(){
	http.open('get','dropdownlist.php', true);
	http.onreadystatechange = function(){
	if(http.readyState == 4){
		var response = http.responseText;
		document.getElementById('dropdownlist').innerHTML = response;
		document.getElementById('dropdownlist').style.display = 'block';
		} }
	http.send(null); }

Open in new window

0
 

Author Comment

by:designersx
ID: 24830195
0
 

Author Comment

by:designersx
ID: 24830199
u will see that there is a small problem in logout, please help me in that.
0
 

Author Comment

by:designersx
ID: 24830210
enter username and password

admin admin
0
 
LVL 20

Expert Comment

by:Gawai
ID: 24830240
well i cant login.
can u tell me the usage of this >> var res = response.replace(/^\s+|\s+$/, '');
0
 

Author Comment

by:designersx
ID: 24830247
had u entered

admin
admin

username and password

i used earlier because the server was including some extra spaces like quotes and returning some undesired length so i used to trim all those extra spaces.

for the time being i have commented it.
0
 

Author Comment

by:designersx
ID: 24830287
sir i have made 80% of corrections. now only 1 issue is left in this.

you can check at
http://dev.wringstudio.com/testing/4_login/index1.php

username:-  admin
password:- admin
0
 

Author Comment

by:designersx
ID: 24830295
when i refresh the page then page goes to login form, why?? even when the session is set.
0
 
LVL 20

Expert Comment

by:Gawai
ID: 24830299
i cant login at all... it is not getting redirected to any page.
0
 

Author Comment

by:designersx
ID: 24830303
2 issues are left

1) when u enter the wrong username and password for the second time after login in successfully and logout , it will be login even then. WHY?

2) when i refresh the page then page goes to login form, why?? even when the session is set.

latest code is below.
login.js file
 
function createObject() {
	var request_type;
	var browser = navigator.appName;
	if(browser == "Microsoft Internet Explorer"){
		request_type = new ActiveXObject("Microsoft.XMLHTTP"); }
	else{
		request_type = new XMLHttpRequest(); }
	return request_type; }
var http = createObject();
 
function mylogin() {
	//alert("hi")
	var username = encodeURI(document.getElementById('username').value);
	//alert(username)
	var password = encodeURI(document.getElementById('password').value);
	//alert(password)
	http.open('get', 'login.php?username='+username+'&password='+password);
	http.onreadystatechange = function(){
	 if(http.readyState == 4){
		var response = http.responseText;
		var res = response.replace(/^\s+|\s+$/, '');
		//alert(res)
			if(res == "no"){
					//alert("no")
					document.getElementById('login').innerHTML = 'Login Failed';
					document.getElementById('login').style.display = 'block';
					document.getElementById('loginform').style.display = 'block';
			} else {
					//alert("yes")
					document.getElementById('login').innerHTML = response;
					document.getElementById('login').style.display = 'block';
					document.getElementById('loginform').style.display = 'none';
			}
		}
	}
	if(document.getElementById('logout').style.display == 'block')
		document.getElementById('logout').style.display = 'none';
	http.send(null); 
	}
 
function mylogout(){
	//document.getElementById('loginform').style.display = 'none';
	//alert("logout")
	http.open('get','logout.php', true);
	http.onreadystatechange = function(){
	if(http.readyState == 4){
		var response = http.responseText;
		document.getElementById('logout').innerHTML = response;
		document.getElementById('logout').style.display = 'block';
		}
	}
	if(document.getElementById('login').style.display == 'block')
		document.getElementById('login').style.display = 'none';
		
	if(document.getElementById('dropdownlist').style.display == 'block')
		document.getElementById('dropdownlist').style.display = 'none';
		
	http.send(null);
}
 
function dropdownlist(){
	document.getElementById('login').style.display = 'none';
	http.open('get','dropdownlist.php', true);
	http.onreadystatechange = function(){
	if(http.readyState == 4){
		var response = http.responseText;
		document.getElementById('dropdownlist').innerHTML = response;
		document.getElementById('dropdownlist').style.display = 'block';
		}
	}
	http.send(null);
}

Open in new window

0
 

Author Comment

by:designersx
ID: 24830309
sir i am using ajax. so in url it won't show u where we are going.

open the link http://dev.wringstudio.com/testing/4_login/index1.php

fill
admin
admin

u will see the logout page.

working here. please try again.
0
 

Author Comment

by:designersx
ID: 24830339
i am sending u the 2 snapshots.

before login and after login.
sna2.bmp
snap.bmp
0
 

Author Comment

by:designersx
ID: 24830353
r u able to login now?

rest of the code is below. login.js file i have already given just above.

as i was talking that 2 issues are left.
1) when u enter the wrong username and password for the second time after login in successfully and logout , it will be login even then. WHY?

2) when i refresh the page then page goes to login form, why?? even when the session is set.

below is the snapshot showing the issue of 1 .

after logout , i have entered the wrong username and even then it is picking the correct username?? this is after logout when u try to again to login.
index1.php
<?php include('config.php'); ?>
<script type="text/javascript" language="javascript" src="login.js"></script>
<div id="login"></div> 
<div id="loginform">
<form>
Username<input name="username" type="text" id="username" />
Password<input name="password" type="password" id="password" />
<input type="button" name="login" value="Login" onclick="mylogin();" />
</form>
</div>
<div id="dropdownlist"></div>
<div id="logout"></div>
 
login.php
<?php
include('config.php');
 
$username = $_GET['username']; 
$password = $_GET['password'];
 
$sql = 'select count(*) as total from login where username="'. $username . '" and password = "' . $password . '"';
$query = mysql_query($sql); 
$rec = mysql_fetch_assoc($query); 
$num_rows = intval($rec['total']);
 
if($num_rows > 0){
	$_SESSION['loggedin'] = 1 ; ?>
	<a href="javascript:dropdownlist();"><?php echo $username; ?></a>
	<form><input type="button" name="logout" value="Logout" onclick="mylogout();" /></form>
<?php
}
else{
	echo "no";
}
?>
 
logout.php
 
<?php
include('config.php');
session_destroy();
$_SESSION['loggedin'] = 0 ;
?>
<script type="text/javascript" language="javascript" src="login.js"></script>
<div id="login"></div>
<div id="loginform">
<form>
Username<input name="username" type="text" id="username" />
Password<input name="password" type="password" id="password" />
<input type="button" name="login" value="Login" onclick="mylogin();" />
</form>
</div>
<div id="dropdownlist"></div>
<div id="logout"></div>
 
config.php
<?php
	session_start();
	$db_host="localhost";
	$db_name="session_cms_ajax";
	$username="root";
	$password="";
	$db_con=mysql_connect($db_host,$username,$password) or die("connection not build".mysql_error());
	$db=mysql_select_db($db_name) or die("database not build".mysql_error());
?>
 
dropdownlist.php
 
<?php include('config.php');
if(isset($_SESSION['loggedin'])){
	echo "i am in dropdownlist page. This is my private page.";
?>
<form><input type="button" name="logout" value="Logout" onclick="mylogout();" /></form>
<?php }?>

Open in new window

snap.bmp
0
 

Author Comment

by:designersx
ID: 24830358
r u able to login sir?
0
 
LVL 20

Accepted Solution

by:
Gawai earned 250 total points
ID: 24831013
change you login.php to :
<?php
include('config.php');
 
$username = $_GET['username']; 
$password = $_GET['password'];
 
$sql = "select count(*) as total from login where username='$username' and password = '$password' ";
$query = mysql_query($sql); 
$rec = mysql_fetch_assoc($query); 
$num_rows = intval($rec['total']);
 
if($num_rows > 0){
	$_SESSION['loggedin'] = 1 ; ?>
	<a href="javascript:dropdownlist();"><?php echo $username; ?></a>
	<form><input type="button" name="logout" value="Logout" onclick="mylogout();" /></form>
<?php
}
else{
	echo "Invalid user name or password";
}
?>

Open in new window

0

Featured Post

Simplifying Server Workload Migrations

This use case outlines the migration challenges that organizations face and how the Acronis AnyData Engine supports physical-to-physical (P2P), physical-to-virtual (P2V), virtual to physical (V2P), and cross-virtual (V2V) migration scenarios to address these challenges.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Google Maps API and PHP 25 34
Optimize simple Javascript code to use no repetitions 12 32
jQuery Scroll To Top 5 13
html Uncheck Checkbox 2 13
OverviewThis article demonstrates a simple search form using AJAX. The purpose of the article is to demonstrate how to use the same code to render a page and javascript (JQuery) and AJAX to make subsequent calls to refine the results. The princip…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

831 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question