...

View Full Version : Very Simple AJAX question



mctoys
06-29-2012, 11:37 AM
Hi Guys

I have a very simple problem for you. I have a little ajax script which just checks a string's length in a form field and reports back how many characters are remaining. I would like to use this script on multiple fields so I want to be able to pass the max_string_length and response_field parameters through to the javascript. Here's the call:

checkLength(this.value,'50','usplength')

Here's the function line:

function checkLength(text,length,output)

and here's the response text line:

document.getElementById(output).innerHTML=xmlHttp.responseText;

Needless to say this isn't working but if I specify a field name in speech marks, it works fine. How do I get the passed variable "output" to be the field name which the script dumps to?

Thanks
Dan

Philip M
06-29-2012, 12:48 PM
My guess is that output is a variable local to the function checkLength().

declare it outside the function,
var output;

All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

mctoys
06-29-2012, 02:14 PM
Hi Phillip

Thanks for that, I thought for a second that would be it! Sounded like prefect logic. Unfortunately it didn't work. Is there any chance you could check to see if my code is ok?

var xmlHttp;
var output;

function checkLength(text,length,output)
{

xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
{
alert ("Your browser does not support AJAX!");
return;
}

var url="checkLength.php";
url=url+"?text="+text;
url=url+"&length="+length;
url=url+"&sid="+Math.random();
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}

function stateChanged()
{
if (xmlHttp.readyState==4)
{
document.getElementById(output).innerHTML=xmlHttp.responseText;
}
}

function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}


Thanks
Dan

DaveyErwin
06-29-2012, 03:36 PM
as Mr M :) has said ...
the problem is the var output
is local to the function
checkLength. one solution
is to make the function
stateChanged
also local to
checkLength ...

<!doctype html>
<head><title></title>
<script>
function checkLength(text,length,output){
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null){
alert ("Your browser does not support AJAX!");
return;
}
var url="checkLength.php";
url=url+"?text="+text;
url=url+"&length="+length;
url=url+"&sid="+Math.random();
xmlHttp.onreadystatechange=function stateChanged(){
if (xmlHttp.readyState==4){
document.getElementById(output).innerHTML=xmlHttp.responseText;
}
}
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}
function GetXmlHttpObject(){
var xmlHttp=null;
try{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}catch (e){
// Internet Explorer
try{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}catch (e){
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}

</script></head><body>
<button type="button" onclick="checkLength('text',50,'dsply')">clickme</button>
<div id="dsply"></diV>
</body></html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum