HTML Form problems

Lemming · 02-08-2002 12:16PM #1

I seem to have a very odd problem regarding html forms and javascript.

I have a page where I'm passing an entire <select> tag object to a javascript function,

eg.

<select name="blah" size=1 onChange="funcName(this)">
</select>

as opposed to ...

<select name="blah" size=1 onChange="funcName(options[selectedIndex].value)">

What happens next is that when I alter the select tag info on the page itself, I get an alert box popping up telling me "Options: [object HTMLselectElement]" (in Netscape), or "Options: [object]" in IE. So it's not even getting INTO the javascript function.

But on another script I wrote to test this passing of the select object, everything seems to work fine.

Any suggestions? I am well and truly stumped here

Enygma · 02-08-2002 12:43PM

What do you mean it isn't getting into the function, where is the alert? Can we see more code?

I'm not sure what's wrong here.

Lemming · 02-08-2002 02:12PM

Sorry Enygma.

When I say that it snot gettign into the function, what I mean is that it does not appear to get INTO the javascript function. It wipes out somewhe
re between the "onChange" call and the function declaration.

if I put an alert just inside the function to say "here" or something, it doesn't even get that far.

here's the code (more or less):

<?php
......
?>
.......
<script>

function alterTRow(selObj, name)
{
   for(var i = 1; i < selObj.options.length, i++)
   {
      if(selObj.options[i].selected)
      {
         var option = selObj.options[i].value ;

         if(option == 'opt4')
         {
            document.getElementById(name + 'Other').style.visibility = 'visible' ;

            if(name == 'org')
               alterNode(option) ;

            switch(navigator.family)
            {
               case 'ie4':
                     document.getElementById(name + 'Other').style.display = 'inline' ;
                     break ;

               case 'gecko':
                     document.getElementById(name + 'Other').style.display = 'table-row' ;
                     break ;

               default:
                     break ;
            }
         }
         else
         {
            document.getElementById(name + 'Other').style.visibility = 'hidden' ;
            document.getElementById(name + 'Other').style.display = 'none' ;
         }
      }
   }
}
</script>

.......

<body>
....
<select name="sel1" size=1 onChange="alterTRow(this, 'org')">
   <option value="" selected>None Selected</option>
   <option value="opt1">Option 1</option>
   <option value="opt2">Option 2</option>
  <option value="opt3">Option 3 (please specify)</option>
</select>
....
<select id="id0" name="sel2" size=4 multiple onChange="alterTRow(this, 'hospital')">
   <option value="" selected>None Selected</option>
   <option value="opt1">Option 1</option>
   <option value="opt2">Option 2</option>
   <option value="opt3">Option 3</option>
   <option value="opt4">Option 4 (please specify)</option>
</select>
.....
</body>

What happens is, as soon as I change a select tag I get an alert box popping up (despite my not having any in my code), saying "Options: [Object HTMLselectElement]" using NS, or "Options: [object]" under IE. Nothing else happens, even if I place an alertbox inside the function.

yet, a test script I created works fine. Here's the script in its entirety:

<?php

?>
<html>
<head>
<title>Test Page</title>
<script type="text/javascript">
<!--

function alterTRow(selObj, name)
{
 var option = null ;
 for(var i = 1; i < selObj.options.length; i++)
 {
     if(selObj.options[i].selected)
     {
        if(option == null)
           option = selObj.options[i].value ;
        else
           option += selObj.options[i].value ;
     }
 }
 alert("Option: " + option) ;
}

//-->
</script>
</head>
<body>
<form action="<? echo $PHP_SELF ; ?>" method="post">
 <select name="" size=4 multiple onChange="alterTRow(this, 'test')">
  <option value="">None Selected</option>
  <option value="opt1">Option 1</option>
  <option value="opt2">Option 2</option>
  <option value="opt3">Option 3</option>
  <option value="opt4">Option 4</option>
 </select>
</form>
</body>
</html>

Enygma · 02-08-2002 04:28PM

You're gonna freak...

See this line?
for(var i = 1; i < selObj.options.length, i++)

Change it to
for(var i = 1; i < selObj.options.length; i++)

You had a comma instead of a semi-colon.

hehe

Headwrecker huh?

Lemming · 02-08-2002 04:39PM

Originally posted by Enygma
You're gonna freak...

See this line?
for(var i = 1; i < selObj.options.length, i++)

Change it to
for(var i = 1; i < selObj.options.length; i++)

You had a comma instead of a semi-colon.

hehe Headwrecker huh?

quite whimpering sound ........

/me freaks
AAAAAAAAGGGGGGGGGGGGGGGGHHHHH BASTARRRRRDDDDDDDDD F*CKING RUNT-F*CK-C*CK SUCKING-MOTHERF**KING BOLL*CKS OF A SEMI-COLON :mad:

HTML Form problems

Comments