getElementByTagName - object doesn't support property...

Phil Petree

unread,

Jun 23, 2011, 10:01:57 PM6/23/11

to prototype-s...@googlegroups.com

OK, this is quite odd to me... In the form below in the 2nd <select> there is an option. If this option is taken out I get a prototype error but if I leave the blank option in, then I get an error that says this object doesn't support this property or method... huh?

I'm sure its something stupid I'm doing but its late, I'm tired and two hours later I still dont see what the problem is...

here's the test module:

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<title>Move Selects betwen listboxes</title>
<script type='text/javascript' src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js"></script>
<script type='text/javascript'>
function move_jurisdiction ()
{
var from_area = $F('source_area');
var to_area = $F('target_area'); // this var never gets set unless an option is added
moveOptionsAcross(from_area, to_area);
}

// moveOptionsAcross
//
// Move selected options from one select list to another
//
function moveOptionsAcross(fromSelectList, toSelectList)
{
var selectOptions = fromSelectList.getElementsByTagName('option'); // this line blows up every time!!!
  for (var i = 0; i < selectOptions.length; i++)
{
    var opt = selectOptions[i];
    if (opt.selected)
    {
          fromSelectList.removeChild(opt);
          toSelectList.appendChild(opt);
          // originally, this loop decremented from length to 0 so that you
          // wouldn't have to worry about adjusting the index. However, then
          // moving multiple options resulted in the order being reversed from when
          // was in the original selection list which can be confusing to the user.
          // So now, the index is adjusted to make sure we don't skip an option.
          i--;
    }
}
}

</script>
</head>
<body>
<form id='myform' name='myform' method='get' action=''>
<table border='0'>
<tr>
<td>
<select name='source_area' id='source_area' size='6' multiple>
<option>LA</option>
<option>DENVER</option>
<option>DALAS</option>
<option>ATLANTA</option>
<option>CHICAGO</option>
<option>NY</option>
<option>MIAMI</option>
</select>
</td>
<td>
<select name='target_area' id='target_area' size='6' multiple>

<option>press 1 for work</option>
</select>
</td>
</tr>
<tr><td></td><td align='center'><input type='button' value='move' onclick="move_jurisdiction();"><input type='reset' name="Reset" value="Reset"></td></tr>
</table>
</form>
</body>
</html>

Matt Petrovic

unread,

Jun 24, 2011, 11:10:47 AM6/24/11

to prototype-s...@googlegroups.com

$F gets the value of a form element, not the element itself. You're feeding a string into that function, and strings don't have the getElementsByTagName method.

Use $ instead.

Phil Petree

unread,

Jun 27, 2011, 2:00:20 AM6/27/11

to prototype-s...@googlegroups.com

Thanks Matt. I sure didn't see that one! I took the weekend off (meaning I only worked about 6 hours each day! LOL)

> --
> You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group.
> To view this discussion on the web visit https://groups.google.com/d/msg/prototype-scriptaculous/-/5YJYNaeiUPcJ.
> To post to this group, send email to prototype-s...@googlegroups.com.
> To unsubscribe from this group, send email to prototype-scripta...@googlegroups.com.
> For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en.
>

Reply all

Reply to author

Forward