getElementById(var)

**soundser** · 11-09-2010, 03:41 AM

Hi,

The test page at http://www.soundset.com/test.php is intended to perform client side validation and to display a message to the user if it fails. It uses a variable with getElementById(var) so the form can be expanded later and the message displayed in different divs.

The trouble seems to be when the error check is triggered. The div named in the variable is 'not defined' according to the Firefox error console.

Here is the content of test.php:

HTML Code:

<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>

<meta charset="iso-8859-1" />

<title>test</title>

<script type="text/javascript">

function GetXmlHttpObject()
{
  var req;

  try
  {
    // Firefox, Opera, Safari
    req = new XMLHttpRequest();
  }

  catch (e)
  {
    // Internet Explorer
    try
    {
      //For IE 6
      req = new ActiveXObject("Msxml2.XMLHTTP");
    }

    catch (e)
    {
      try
      {
        //For IE 5
        req = new ActiveXObject("Microsoft.XMLHTTP");
      }

      catch (e)
      {
        alert('Your browser is not IE 5 or higher, or Firefox or Safari or Opera');
      }
    }
  }

  return req;
}

</script>
<script type="text/javascript">

var xmlHttp

function show_hint(field, str, hintBox)  
{   
 if (str.length==0)
  { 
  document.getElementById(hintBox).innerHTML=""
  return
  }
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
  {
  alert ("Browser does not support HTTP Request")
  return
  } 
var url="http://www.soundset.com/getClue.php"
url=url+"?q="+str
url=url+"&field="+field
xmlHttp.onreadystatechange=stateChanged 
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}

function stateChanged() 
{ 
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 { 
 document.getElementById(hintBox).innerHTML=xmlHttp.responseText 
 } 
 else
 {
 document.getElementById(hintBox).innerHTML="<img src=images/ajax-loader.gif></img>";
 }
}
</script>

</head>

<body>

<br /><br />

<form action="test.php" method="post">

Qty: <input name="quantity" value="" onblur="show_hint('quantity', this.value, 'txtHint')" type="text" />
<div id="txtHint">&nbsp;</div>

</form>

</body>
</html>

Here is the content of getClue.php:

PHP Code:


$field = $_GET['field'];

$q = $_GET['q'];



if($field == 'quantity')

{

  if($q < 1)

  {

    $hint = 'Quantity must be at least 1.';

  } 



  if($q > 100)

  {

    $hint = 'Quantity cannot be greater than 100.';

  } 



  if(!is_numeric($q))

  {

    $hint = 'Quantity must be numeric.';

  } 

  

  if($q > 1 AND $q < 100 AND is_numeric($q))

  {

    $hint = 'OK';

  } 

}



$response = $hint;



//output the response

echo $response;

Why would hintBox be undefined? Thanks!

**Ron** · 11-09-2010, 08:15 AM

I'm not all that familiar with JavaScript, but my first guess from looking at your code is variable scope.

It seems you are defining hintBox as a local variable to function show_hint and trying to use it in stateChanged.

Of course this is a pure guess without any basis in reality.

**Ron** · 11-09-2010, 08:27 AM

Again, I don't know much about JavaScript so I might be barking up the wrong tree entirely, but according to
http://www.communitymx.com/content/a....cfm?cid=4E137
Variables decalred as function parameters have local scope.

I don't know if hintBox is some sort of a language specific special thingy or whatever.

**soundser** · 11-09-2010, 09:54 AM

I'm pretty clueless about Javascript too. What I'm attempting should be pretty straightforward, however.

Notice this line on the form:

HTML Code:

<input name="quantity" value="" onblur="show_hint('quantity', this.value, 'txtHint')" type="text" />

It's just passing three values to the function: the name of the field, it's current value, and the name of the div to show the result in.

Notice the parameters of the show_hint function:

Code:

function show_hint(field, str, hintBox)

So, inside the show_hint function, in this case, field has the value 'quantity', str has the value of whatever is entered in the input, and hintBox should have the value 'txtHint'. The first and second parameters have the correct values inside of the show_hint function, but the third parameter has the literal value 'hintBox', rather than the value that was passed in 'txtHint'.

I don't know why. Scope shouldn't be an issue because all of the parameters are passed the same way.

BTW, hintBox is not 'some sort of a language specific special thingy...' as far as I know (which is a short ride

). It's just the random name I gave to my div to display the result.

Thanks for the reply as always...still stumped.

**Ron** · 11-09-2010, 10:08 AM

Ya, but hintBox is only known to the show_hint function and nowhere else. You're trying to use it in the stateChanged function. That's my take on it, anyway.

**soundser** · 11-09-2010, 10:32 AM

Yes, you're correct!

If the variable hintBox is passed to the stateChanged function it is no longer 'undefined'.

I changed:

HTML Code:

 xmlHttp.onreadystatechange=stateChanged

to

HTML Code:

xmlHttp.onreadystatechange=stateChanged(hintBox)

and

HTML Code:

function stateChanged

to

HTML Code:

function stateChanged(hintBox)

Now, only the <img src=images/ajax-loader.gif></img> displays when onBlur is triggered however. I gather that means this line is false:

HTML Code:

xmlHttp.readyState==4 || xmlHttp.readyState=="complete"

I don't know why that would be, either...

**Ron** · 11-09-2010, 10:41 AM

Is it my imagination or are there a bunch of semicolons missing ?

**soundser** · 11-09-2010, 10:48 AM

Originally Posted by Ron

Is it my imagination or are there a bunch of semicolons missing ?

Yes...funny. It seemed to work without them, but I've added them now. Still there is an issue with the response. It's only the load image.

**Ron** · 11-09-2010, 11:22 AM

Have you tried hardcoding
if (1==1)
to see if the logic works?
Have you tried displaying the values you are testing?

**soundser** · 11-09-2010, 11:30 AM

Yes, I've found that I cannot use thie following to send the hintBox variable to the stateChanged() function:

HTML Code:

xmlHttp.onreadystatechange=stateChanged(hintBox);

It causes the readystate to return 0 (readystate==0 instead of readystate==4).
It needs to be:

HTML Code:

xmlHttp.onreadystatechange=stateChanged;

Otherwise, the logic seems OK (it works with hard coded values). I tried setting hintBox as a global inside of the show_hint() function, then accessing it from the stateChanged() function but it was undefined there.

**soundser** · 11-09-2010, 11:33 AM

Any idea how to pass hintBox to the stateChanged() function?

**soundser** · 11-09-2010, 11:48 AM

Hmmm...I must have done something wrong before, because if I set a global variable inside of show_hint():

HTML Code:

glob = hintBox;

Then access it inside of stateChanged:

HTML Code:

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

...it works (woohoo!) However, I'm wondering if it's 'bad practice' to use global variables and if there may be a better way.

**Gwaihir** · 11-09-2010, 11:56 AM

You can't pass it specifically. Your registered eventhandler, the stateChanged(e) function will receive the event it handles, period. You'll have to work around that.

Personally, I'd look at Prototype or something of the sort, to see how they implemented it. Actually, I'd just use Prototype or jQuery straight up; no point inventing yet another Ajax engine, unless as an exercise in JavaScripting.

**soundser** · 11-09-2010, 12:08 PM

Originally Posted by Gwaihir

You can't pass it specifically. Your registered eventhandler, the stateChanged(e) function will receive the event it handles, period. You'll have to work around that.

Personally, I'd look at Prototype or something of the sort, to see how they implemented it. Actually, I'd just use Prototype or jQuery straight up; no point inventing yet another Ajax engine, unless as an exercise in JavaScripting.

Thanks. It doesn't seem good to bring in a large library when I need so little Javascript. Nor does it seem good to rely on something that I don't understand well. It may be better to implement specific features when needed, and learn something of the mechanics along the way.

**Ron** · 11-09-2010, 12:14 PM

Originally Posted by soundser

Nor does it seem good to rely on something that I don't understand well. It may be better to implement specific features when needed, and learn something of the mechanics along the way.

Why, you can program in hex, assembler, C++ and/or whatever other code bases underly Javascript?

LinkBack

Thread Tools

Display

getElementById(var)

Bookmarks

Bookmarks

Posting Permissions