/    Sign up×
Community /Pin to ProfileBookmark

Multiple pull-down menus

Copy linkTweet thisAlerts:
May 21.2006

Is this possible?

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

[quote]

<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>

[/quote]

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.

to post a comment
JavaScript

10 Comments(s) ↴

Copy linkTweet thisAlerts:
@phpnoviceMay 21.2006 — 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.
Copy linkTweet thisAlerts:
@TechlessauthorMay 21.2006 — 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?
Copy linkTweet thisAlerts:
@phpnoviceMay 21.2006 — That is only half the problem. Let's see your [B]formHandler()[/B] function.
Copy linkTweet thisAlerts:
@TechlessauthorMay 21.2006 — 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>
[/quote]
Copy linkTweet thisAlerts:
@phpnoviceMay 21.2006 — 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:
&lt;form [COLOR=Red]...etc...[/COLOR]&gt;
&lt;select name="site" size=1 onChange="[COLOR=Red]return formHandler(this)[/COLOR]"&gt;
&lt;option value=""&gt;select
&lt;option value="http:site.com"&gt;choice
&lt;option value="http://site.com"&gt;choice

&lt;/select&gt;
&lt;input type=button value="Go!" onClick="[COLOR=Red]return formHandler(site)[/COLOR]"&gt;
&lt;/form&gt;
You'll note that I removed your form name. This is because, with this change, a form name is no longer required.
Copy linkTweet thisAlerts:
@UltimaterMay 21.2006 — Should be coding for accessibility:
<i>
</i>&lt;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"&gt;
&lt;select name="site" size="1" onchange="if(this.selectedIndex)location.href=this.options[this.selectedIndex].value"&gt;
&lt;option&gt;Choose a search engine&lt;/option&gt;
&lt;option value="http://www.yahoo.com"&gt;Yahoo&lt;/option&gt;
&lt;option value="http://www.google.com"&gt;Google&lt;/option&gt;
&lt;/select&gt;
&lt;input type="submit" value="Go!"&gt;
&lt;/form&gt;

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:
<i>
</i>&lt;?php
header("Location: {$_REQUEST["site"]}");
exit;
?&gt;
Copy linkTweet thisAlerts:
@TechlessauthorMay 21.2006 — 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?
Copy linkTweet thisAlerts:
@UltimaterMay 21.2006 — Remove the ONCHANGE event handler.
<i>
</i>&lt;select name="site" size="1"&gt;
Copy linkTweet thisAlerts:
@TechlessauthorMay 21.2006 — Perfect. Thanks Ultimater.
Copy linkTweet thisAlerts:
@phpnoviceMay 21.2006 — &lt;?php
header("Location: {$_REQUEST["site"]}");
exit;
?&gt;[/QUOTE]
One problem... In the case of multiple dropdowns, the above code cannot serve them all.
×

Success!

Help @Techless spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.10,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...