Menu
I have been making an ajax form for days now my knowledge of javascript and xml are limited. I have got my form working but I want to get the solution for a null xml response at the moment if there is no error i made a work around so the xml returns a fullstop which shows up as an error but in white. I would like to know if there is a way to keep the elementByiD as null when the xml is null as it was returning the error object required is there a better way of doing this????
form.php
[code]
<?php
session_start();
ini_set (“display_errors”, “1”);
error_reporting(E_ALL);
$errorheading=”;
?>
<!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” xml:lang=”en” lang=”en”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Test Form</title>
<script type=”text/javascript”>
function Ajax(){
var xmlHttp;
try{
xmlHttp=new XMLHttpRequest();// Firefox, Opera 8.0+, Safari
}catch (e){
try{
xmlHttp=new ActiveXObject(“Msxml2.XMLHTTP”); // Internet Explorer
}catch (e){
try{
xmlHttp=new ActiveXObject(“Microsoft.XMLHTTP”);
}catch (e){
alert(“No AJAX!?”);
return false;
}
}
}
xmlHttp.onreadystatechange=function(){
if (xmlHttp.readyState == 4) {
if(xmlHttp.status == 200) {
var a = document.getElementById(‘usernameerror’).innerHTML=xmlHttp.responseXML.getElementsByTagName(“usernameerror”)[0].firstChild.nodeValue;
if (a==”.”)
{
document.getElementById(‘usernamehead’).className = ‘head’;
document.getElementById(‘usernameinput’).className = ‘mediumname’;
document.getElementById(‘usernameerror’).className = ‘blankerror’;
}
else
{
document.getElementById(‘usernamehead’).className = ‘errorhead’;
document.getElementById(‘usernameinput’).className = ‘errormediumname’;
document.getElementById(‘usernameerror’).className = ‘formerror’;
}
var b = document.getElementById(’emailerror’).innerHTML=xmlHttp.responseXML.getElementsByTagName(“emailerror”)[0].firstChild.nodeValue;
if (b==”.”)
{
document.getElementById(’emailhead’).className = ‘head’;
document.getElementById(’emailinput’).className = ‘longname’;
document.getElementById(’emailerror’).className = ‘blankerror’;
}
else
{
document.getElementById(’emailhead’).className = ‘errorhead’;
document.getElementById(’emailinput’).className = ‘errorlongname’;
document.getElementById(’emailerror’).className = ‘formerror’;
}
var c = document.getElementById(’email2error’).innerHTML=xmlHttp.responseXML.getElementsByTagName(“email2error”)[0].firstChild.nodeValue;
if (c==”.”)
{
document.getElementById(’email2head’).className = ‘head’;
document.getElementById(’email2input’).className = ‘longname’;
document.getElementById(’email2error’).className = ‘blankerror’;
}
else
{
document.getElementById(’email2head’).className = ‘errorhead’;
document.getElementById(’email2input’).className = ‘errorlongname’;
document.getElementById(’email2error’).className = ‘formerror’;
}
var d = document.getElementById(‘passworderror’).innerHTML=xmlHttp.responseXML.getElementsByTagName(“passworderror”)[0].firstChild.nodeValue;
if (d==”.”)
{
document.getElementById(‘passwordhead’).className = ‘head’;
document.getElementById(‘passwordinput’).className = ‘mediumname’;
document.getElementById(‘passworderror’).className = ‘blankerror’;
}
else
{
document.getElementById(‘passwordhead’).className = ‘errorhead’;
document.getElementById(‘passwordinput’).className = ‘errormediumname’;
document.getElementById(‘passworderror’).className = ‘formerror’;
}
var e = document.getElementById(‘password2error’).innerHTML=xmlHttp.responseXML.getElementsByTagName(“password2error”)[0].firstChild.nodeValue;
if (e==”.”)
{
document.getElementById(‘password2head’).className = ‘head’;
document.getElementById(‘password2input’).className = ‘mediumname’;
document.getElementById(‘password2error’).className = ‘blankerror’;
}
else
{
document.getElementById(‘password2head’).className = ‘errorhead’;
document.getElementById(‘password2input’).className = ‘errormediumname’;
document.getElementById(‘password2error’).className = ‘formerror’;
}
}
}
}
var url=”formval.php”;
var username = document.getElementById(“username”);
var email = document.getElementById(“email”);
var email2 = document.getElementById(“email2”);
var password = document.getElementById(“password”);
var password2 = document.getElementById(“password2”);
var params = “username=”+username.value+”&email=”+email.value+”&email2=”+email2.value+”&password=”+password.value+”&password2=”+password2.value;
// var params = “email=”+email.value;
xmlHttp.open(“POST”, url, true);
xmlHttp.setRequestHeader(‘Content-Type’, ‘application/x-www-form-urlencoded’);
xmlHttp.send(params);
}
</script>
</head>
<body>
<div id=”wrapper”>
<div id=”content”>
<table class=”contentholder”>
<tr><td class=”pageheading”>Sign Up</td></tr>
<tr><td>
<form name=”signup”>
<table class=”dataform”>
<tr><td class=”formtitle” colspan=”3″>Step 1</td></tr>
<tr><td class=”formtitlemess” colspan=”2″>Please fill out the form below, all fields marked with <span class=”required”>*</span> are required.</td><td class=”titleformerror”><?=$errorheading?></td></tr>
<tr>
<td><div id=”usernamehead” class=”head”><span class=”required”>* </span>Username</div></td>
<td><div id=”usernameinput” class=”mediumname”><input type=”text” name=”username” id=”username” /></div></td>
<td><div id=”usernameerror” class=”blankerror”></div></td>
</tr>
<tr>
<td><div id=”emailhead” class=”head”><span class=”required”>* </span>Email</div></td>
<td><div id=”emailinput” class=”longname”><input type=”text” name=”email” id=”email” /></div></td>
<td><div id=”emailerror” class=”blankerror”></div></td>
</tr>
<tr>
<td><div id=”email2head” class=”head”><span class=”required”>* </span>Email Again</div></td>
<td><div id=”email2input” class=”longname”><input type=”text” name=”email2″ id=”email2″ /></div></td>
<td><div id=”email2error” class=”blankerror”></div></td>
</tr>
<tr>
<td><div id=”passwordhead” class=”head”><span class=”required”>* </span>Password</div></td>
<td><div id=”passwordinput” class=”mediumname”><input type=”password” name=”password” id=”password” /></div></td>
<td><div id=”passworderror” class=”blankerror”></div></td>
</tr>
<tr>
<td><div id=”password2head” class=”head”><span class=”required”>* </span>Password Again</div></td>
<td><div id=”password2input” class=”mediumname”><input type=”password” name=”password2″ id=”password2″ /></div></td>
<td><div id=”password2error” class=”blankerror”></div></td>
</tr>
<tr>
<td class=”head”> </td>
<td class=”datasubmitmedium”><input type=”button” value=”Next” onclick=”Ajax();” /></td>
<td class=”blankerror”> </td>
<tr>
<tr>
<td colspan=”3″> </td>
</tr>
<tr>
<td colspan=”3″><div id=”errorholder”></div></td>
</tr>
</table>
</form>
</td></tr>
</table>
</div>
</div>
</body>
</html>