We help IT Professionals succeed at work.

Check out our new AWS podcast with Certified Expert, Phil Phillips! Listen to "How to Execute a Seamless AWS Migration" on EE or on your favorite podcast platform. Listen Now

x

login is not working in ajax??

designersx
designersx asked
on
Medium Priority
299 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

Comment
Watch Question

Commented:
make sure login.js is located in same folder . let us know the url of your site to check the exact issue

Author

Commented:
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.

Author

Commented:
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

Author

Commented:
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

Author

Commented:
u will see that there is a small problem in logout, please help me in that.

Author

Commented:
enter username and password

admin admin

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

Author

Commented:
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.

Author

Commented:
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

Author

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

Commented:
i cant login at all... it is not getting redirected to any page.

Author

Commented:
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

Author

Commented:
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.

Author

Commented:
i am sending u the 2 snapshots.

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

Author

Commented:
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

Author

Commented:
r u able to login sir?
Commented:
Unlock this solution with a free trial preview.
(No credit card required)
Get Preview
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a free trial preview!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.