Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Drop-down list page select 2

Status
Not open for further replies.

WynneSMI

Programmer
Dec 16, 2002
76
US
I have a simple HMTL web page and with a drop-down list. It's suppose to be drop-down list of pages but I can't figure out how to redirect someone to a page based on the option they select form the list. I'm new at programming so this may be a stupid HTML question. Can anyone help me? Thanks.

<SELECT NAME=&quot;page&quot; onChange=&quot;submit()&quot; style=&quot;font-size: 8pt&quot;>

<option value=&quot;&quot;>----------------------------

<option selected>Choose a Page

<option value=&quot;&quot;>----------------------------

<option value=&quot;page1&quot;>Page 1

<option value=&quot;page2&quot;>Page 2

</select>

I want to to be able to go to a specific web page based on the option I select, ex: If I select Page 1 I want to go to a page called home.htm or Page 2 go to a page called contanct.htm. Thanks for any help!!!
 
An example:

<html>
<head>
<script language=&quot;javascript&quot;>
<!--
function changePage(frm) {
var selObj = frm.selPage;
for (var idx=0; idx < selObj.length; idx++) {
if (selObj[idx].selected) {
document.location = selObj[idx].value;
}
}
}
//-->
</script>
</head>

<body>
<form>
<select name=&quot;selPage&quot; onChange=&quot;changePage(this.form)&quot;>
<option value=&quot;sel1.html&quot;>page 1</option>
<option value=&quot;sel2.html&quot;>page 2</option>
<option value=&quot;sel3.html&quot;>page 3</option>
</select>
</form>

</body>
</html>

Hope this helps
Grzegorz
 
Ok, you'll need some JavaScript code:

Change:

<SELECT NAME=&quot;page&quot; onChange=&quot;submit()&quot; style=&quot;font-size: 8pt&quot;>

to:

<SELECT ID=&quot;page&quot; NAME=&quot;page&quot; onChange=&quot;RedirectToNewPage()&quot; style=&quot;font-size: 8pt&quot;>

*It is important to include a objects ID when you define them, always make sure you define an ID attribute.

Ok the function:

<Script language=&quot;javascript&quot;>
function RedirectToNewPage(){
//get the select box object
var objSel=document.getElementById(&quot;page&quot;);

//redirect the user
document.location.href=objSel.options(objSel.selectedIndex).value;
}
</Script>

* place this above script between your <Head> </Head>

*Make sure your options have the full url you want to goto in the value field.

Example: <option value=&quot; Where</option>

*Also JavaScript is case sensative so when you use the code above make sure it is capitalized where I have it.

&quot;did you just say Minkey?, yes that's what I said.&quot;

MrGreed
 
Thanks MrGreed, very simple and it works! I was wondering how would I specify the page name if the page was up one directory? index file is in the root (c:\root) and the pages or files im going to redirect to are up one directory(c:\root\pages). How would I do that? Thanks again for your help!
 

Just use the relative URL paths within option values:
Code:
<option value=&quot;../page_name.html&quot;>
or
Code:
<option value=&quot;pages/page_name.html&quot;>

Hope this helps
Grzegorz
 
WynneSMI:

See GrSw remarks, they should work, and yes use relative paths if the webpages you want to access are contained within your own website. If accessing webpages on another persons website use the full path.

&quot;did you just say Minkey?, yes that's what I said.&quot;

MrGreed
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top