| moos3 |
08-31-2007 05:27 PM |
Ajax not functioning correctly
I have some ajax on my page for check username it works in my HTML file but not my PHP file. Heres the two versions of it
HTML Version
Code:
<!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 type="text/javascript" src="../ajax/jquery/jquery-1.1.3.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#usernameLoading').hide();
$('#username').blur(function(){
$('#usernameLoading').show();
$.post("check.php", {
username: $('#username').val()
}, function(response){
$('#usernameResult').fadeOut();
setTimeout("finishAjax('usernameResult', '"+escape(response)+"')", 400);
});
return false;
});
});
function finishAjax(id, response) {
$('#usernameLoading').hide();
$('#'+id).html(unescape(response));
$('#'+id).fadeIn();
} //finishAjax
function checkPassword() {
var pass = document.getElementById('pass');
var check = document.getElementById('check');
if((pass.value != "") && (check.value != "")) {
if(pass.value != check.value) {
document.getElementById('password_check').innerHTML = 'Password does not match';
document.getElementById('password_check').style.color = 'red';
return false;
}
else{
document.getElementById('password_check').innerHTML = 'Password OK';
document.getElementById('password_check').style.color = 'green';
return true;
}
}
else{
return false;
}
}
</script>
</head>
<body>
<h1>Ajax Username Check - Using JQuery!</h1>
<fieldset><legend>Registration Form</legend>
<form action="test.html" method="post">
<p><label for="username">Username:</label> <input type="text" name="username" id="username" />
<span id="usernameLoading"><img src="../images/ajax/indicator.gif" alt="Ajax Indicator" /></span>
<span id="usernameResult"></span></p>
<p><label for="password">Password:</label><input type="password" id="pass" name="pass" onKeyUp="checkPassword()"/><input type="password" id="check" name="check" onKeyUp="checkPassword()"/><div class="error_span" id="password_check"></div></p>
<p><input type="submit" name="submit" value="Sign Up!" /></p>
</form>
</fieldset>
</body>
</html>
The PHP Version
PHP Code:
<!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=ISO-8859-1" />
<title>Labs</title>
<link rel="stylesheet" type="text/css" href="../css/main.css" />
<link rel="stylesheet" type="text/css" href="../css/blog.css" />
<link rel="stylesheet" type="text/css" href="../css/admin.css" />
<script type="txt/javascript" src="../ajax/jquery/jquery-1.1.3.js" ></script>
<script type="text/javascript">
$(document).ready(function() {
$('#usernameLoading').hide();
$('#username').blur(function(){
$('#usernameLoading').show();
$.post("check.php", {
username: $('#username').val()
}, function(response){
$('#usernameResult').fadeOut();
setTimeout("finishAjax('usernameResult', '"+escape(response)+"')", 400);
});
return false;
});
});
function finishAjax(id, response) {
$('#usernameLoading').hide();
$('#'+id).html(unescape(response));
$('#'+id).fadeIn();
} //finishAjax
function checkPassword() {
var pass = document.getElementById('pass');
var check = document.getElementById('check');
if((pass.value != "") && (check.value != "")) {
if(pass.value != check.value) {
document.getElementById('password_check').innerHTML = 'Password does not match';
document.getElementById('password_check').style.color = 'red';
return false;
}
else{
document.getElementById('password_check').innerHTML = 'Password OK';
document.getElementById('password_check').style.color = 'green';
return true;
}
}
else{
return false;
}
}
</script>
</head>
<body>
<div class="container">
<div class="header"><img src="/images/rangley_lakes_banner.jpg" /></div><div class="menu">
<ul id="miniflex">
<li><a href="index.php">Home</a></li>
<li><a href="entry.php" class="active">Write Post</a></li>
<li><a href="manage.php">Manage Posts</a></li>
<li><a href="Users.php">Users</a></li>
<li><a href="options.php">Site Options</a></li>
<li><a href="logout.php">Log Out</a></li>
</ul>
</div><br /> <div class="content">
<h2>Add New User</h2>
<form method="post" action="test.php">
<table>
<tr>
<td>Add User:</td>
<td><input type="text" id="username" name="username"><span id="usernameLoading"><img src="../images/ajax/indicator.gif" alt="Ajax Indicator" /></span>
<span id="usernameResult"></span></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="password" id="pass" name="pass" onKeyUp="checkPassword()"/></td>
</tr>
<tr>
<td>Comfirm Password:</td>
<td><input type="password" id="check" name="check" onKeyUp="checkPassword()"/></td>
</tr>
<tr>
<td></td>
<td><div class="error_span" id="password_check"></div></td>
</tr>
<tr>
<td>Email:</td>
<td><input type="text" name="email" id="email" onKeyUp="checkEmail()" /><div class="error_span" id="email_check"></div></td>
</tr>
<tr>
<td>Select TimeZone:</td>
<td><select name="zone"><option selected value="0">--- Choose a TimeZone ---</option><option value=1>England, Ireland, Portugal</option><option value=2>Europe: France, Spain, Germany, Poland, etc.</option><option value=3>Central Europe: Turkey,Greece,Finland,etc</option><option value=4>Moscow,Saudi Arabia</option><option value=5>Oman</option><option value=6>Pakistan</option><option value=7>India</option><option value=8>Indonesia</option><option value=9>China,Phillipines,Malaysia,West Australia</option><option value=10>Japan</option><option value=11>East Australia</option><option value=12>Solomon Islands,Micronesia</option><option value=13>Marshall Islands, Fiji</option><option value=14>Samoa, Midway</option><option value=15>Hawaii, French Polynesia, Cook island</option><option value=16>Alaska</option><option value=17>US Pacific</option><option value=18>US Mountain</option><option value=19>US Central</option><option value=20>US Eastern</option><option value=21>New Foundland, Venezuela, Chile</option><option value=22>Brazil, Argentina, Greenland</option><option value=23>Mid-Atlantic</option><option value=24>Azores, Cape Verda Is.</option></select> </td>
</tr>
<tr>
<td>Security Question:</td>
<td><input type="text" name="secq"/></td>
</tr>
<tr>
<td>Security Question Answer:</td>
<td><input type="text" name="secans"/></td>
</tr>
<tr>
<td/><td align="right"><input type="submit" name="add" value="Add User"/></td>
</tr>
</table>
</form>
</div><div class="footer">
<p>Labs@Guthnur.net Powered by OPEN SOURCE TECHNOLOGIES</p>
</div>
</div>
</body>
</html>
I took out all the POST code to eliminate that as the problem and nothing. you can see these live at http://labs.guthnur.net/admin/test.html and labs.guthnur.net/admin/test.php Any Ideas why one works and one doesn't? |
