Multiple pull-down menus

[Techless]

Is this possible?

I've been using the following pull-down menu code


<form name="form">
<select name="site" size=1 onChange="javascript:formHandler()">">
<option value="">select
<option value="http:site.com">choice
<option value="http://site.com">choice

</select>
<input type=button value="Go!" onClick="javascript:formHandler(this)">
</form>



But when I try to add another menu to the same page all of the menus stop working. It only seems to allow one menu per page but I don't see why that would be the case. I'm confused.

[phpnovice]

If you don't provide uniqueness for your objects (e.g., name="site"), then you code has to have a different algorithm in order to handle the duplications. Then, even if you do provide uniqueness, your code has to know which object to reference. For this part, you would pass the name or the object as an argument to the function.

[Techless]

So in the second line of that code I should replace "site" with a different word in each separate menu and they'll work? Or am I misunderstanding?

[phpnovice]

That is only half the problem. Let's see your formHandler() function.

[Techless]

This is what I have inserted in the head section.


<SCRIPT LANGUAGE="JavaScript">

<!-- Begin
function formHandler(form){
var URL = document.form.site.options[document.form.site.selectedIndex].value;
window.location.href = URL;
}
// End -->
</SCRIPT>

[phpnovice]

Make your function generic by changing it to this:
function formHandler(sel){
window.location.href = sel.options[sel.selectedIndex].value;
return true;
}
Then, your form could be changed to look more like this:
<form ...etc...>
<select name="site" size=1 onChange="return formHandler(this)">
<option value="">select
<option value="http:site.com">choice
<option value="http://site.com">choice

</select>
<input type=button value="Go!" onClick="return formHandler(site)">
</form>
You'll note that I removed your form name. This is because, with this change, a form name is no longer required.

[Ultimater]

Should be coding for accessibility:

<form action="http://www.aplustv.com/public_stuff/redirect2site.php" method="get" onsubmit="if(this.site.selectedIndex)location.href=this.site.options[this.site.selectedIndex].value;return false">
<select name="site" size="1" onchange="if(this.selectedIndex)location.href=this.options[this.selectedIndex].value">
<option>Choose a search engine</option>
<option value="http://www.yahoo.com">Yahoo</option>
<option value="http://www.google.com">Google</option>
</select>
<input type="submit" value="Go!">
</form>

I give you permission to hotlink my http://www.aplustv.com/public_stuff/redirect2site.php page for your non-JavaScript enabled users however if you later want the source:

<?php
header("Location: {$_REQUEST["site"]}");
exit;
?>

[Techless]

Thanks! Now all menus are firing. But one more thing. The menus go to the linked page as soon as you click the selection now instead of after you click the "Go!" button. Is there a way to code it so that it clicking the button is necessary?

[Ultimater]

Remove the ONCHANGE event handler.

<select name="site" size="1">

[Techless]

Perfect. Thanks Ultimater.

[phpnovice]

<?php
header("Location: {$_REQUEST["site"]}");
exit;
?>
One problem... In the case of multiple dropdowns, the above code cannot serve them all.