Click to See Complete Forum and Search --> : Variable scope from XMLHttpRequest Callback


spydersweb
08-24-2006, 01:25 PM
Dear All

I am trying to implement and XMLHttpRequest call for form validation.

I have the code working where it checks to see if an email address supplied already exists. This works, and so does the form validation, however the problem lies within a variable scope issue. The global variable errors is used to let the user know what errors there are with the form. I have declared the variable as a global variable and yet when I set it to nothing from within the XMLHttpRequest function call it treats it as a local variable. If I don't set it to nothing the function works apart from an ever increasing error string.

Not really sure where I am going wrong so any comments are very welcome.

Here is the code for the XMLHttpRequest and form validation function.


<script>
<!--
var request = false;
var smt = false;


// Initiate the XMLHTTP Request object

try {
request = new XMLHttpRequest();
//alert("XMLHttpRequest Created");
} catch (trymicrosoft) {
try {
request = new ActiveXObject("Msxml2.XMLHTTP");
//alert("Msxml2.XMLHTTP created");
} catch (othermicrosoft) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
//alert("Microsoft.XMLHTTP created");
} catch(failed) {
request = false;
}
}
}
// alert if not initialised
if (!request)
alert("Error initialising XMLHttpRequest!");

// email checking function
function getEmail() {

var e = document.form1.Email.value;
var url="checkemail.asp?q="+escape(e);
request.open("GET", url, true);
request.onreadystatechange = updatepage;
request.send(null);
}

function updatepage() {
//alert(request.readyState);
//alert(request.status);
if (request.readyState ==4)
if (request.status ==200) {

if (request.responseText!=0) {
errors+="Email already exists\n";
}

} else {
alert ("Error: "+ request.status);
}
}


function check() {
var errors = "";
getEmail();

//alert(request.onreadystatechange);

//alert("Error report from check() function after email check call\n:"+errors);
var f = document.form1;
var em = f.Email.value.indexOf('@');

if (!f.Email.value) {
errors+='Email rqd\n';
} else {
if (em==-1) {
errors += 'Correct Email Address\n';
}}


if (!f.Firstname.value) { errors+='Firstname rqd\n'; }
if (!f.Surname.value) {errors += 'Surname rqd\n';}
if (!f.Address1.value) {errors+='Address Line rqd\n';}
if (!f.City.value) {errors+='City rqd\n';}
if (!f.County.value) {errors+='County rqd\n';}
if (!f.Postcode.value) {errors+='Postcode rqd\n';}
if (!f.Country.value) {errors+='Country rqd\n';}

if (errors) {
alert(errors);
return false;
} else {
return true;
}
}

//-->
</script>

The other point is that when the Email form field is changed or exited the function is called.

Many thanks
Graham

evlich
08-29-2006, 03:07 PM
Can you just move the declaration of errors into the global scope? e.g.
var errors = "";
function updatePage() {
errors = "";
if( ... ) {
errors = errors + "bad email address";
} else {
errors = errors + "good email address";
}
}


Hope this helps.