hi
let me explain what i want
I have four pages.two html, one js and one php. First page is loginTab.html. There is a tab called "Tab One" when user clicks on it there is a script inside this html page which calls function and loads an external login.html form using ajax. in login.html there is a form and include external js code for ajax functions. what it does is when the user enters email and password and clicks submit then it triggers another ajax function which send a query to php file and compare those variables there with mysql db and returns the message to a div which is in login.html.
the problem here is when i enter email and password and clicks on submit button it does not display anything. How this problem can be solved.i am providing all of my code below
loginTab.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script>
window.onload = initAll;
var xhr = false;
function initAll() {
if(window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
}
else {
if(window.ActiveXObject) {
try {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e) { }
}
}
}
function tabOne() {
if(xhr) {
xhr.onreadystatechange = showTabOne;
xhr.open("GET","login.html", true);
xhr.send(null);
}
}
function showTabOne() {
if(xhr.readyState == 4) {
if(xhr.status == 200) {
var outMsg = xhr.responseText;
}
else {
var outMsg = "Sorry Error.";
}
document.getElementById("message").innerHTML = outMsg;
}
}
</script>
<style>
.tabs {
width: 100px;
height: 25px;
border: 1px solid black;
cursor: pointer;
}
</style>
</head>
<body>
<div class="tabs" onclick="tabOne()">Tab One</div>
<div id="message"></div>
</body>
</html>login.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="login.js" type="text/javascript"></script>
</head>
<body>
<div id="message"></div>
<form name="myForm">
<div>
<label>Email:</label>
<input type="text" name="email" id="email" />
</div>
<div>
<label>password:</label>
<input type="password" name="password" id="password" />
</div>
<div>
<input type="button" name="submit" id="submit" value="Submit" onclick="ajaxFunction()" />
</div>
</form>
</body>
</html>window.onload = initAll;
var xhr = false;
function initAll() {
if(window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
}
else {
if(window.ActiveXObject) {
try {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e) { }
}
}
}
function ajaxFunction() {
var email = document.getElementById('email').value;
var password = document.getElementById('password').value;
var queryString = "?email=" + email + "&password=" + password;
if(xhr) {
xhr.onreadystatechange = show;
xhr.open("GET","login.php" + queryString,true);
xhr.send(null);
}
}
function show() {
if(xhr.readyState == 4) {
if(xhr.status == 200) {
var outMsg = xhr.responseText;
}
else {
var outMsg = "Sorry Problem";
}
document.getElementById("message").innerHTML = outMsg;
}
}login.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<?php
$email = strip_tags($_GET['email']);
$password = strip_tags($_GET['password']);
if($email&&$password) {
$connect = mysql_connect("localhost","root","123456");
mysql_select_db("facebook");
$query = mysql_query("SELECT email FROM users WHERE email='$email'");
$count = mysql_num_rows($query);
if($count == 0) {
echo "You are registered thanks.";
}
else {
die("That email address already exist.");
}
}
else {
die("please fill in both fields!");
}
?>
</body>
</html>please help