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!

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

change url depending on dropdown selection 2

Status
Not open for further replies.
derwent

derwent

Programmer
May 5, 2004
428
GB
I have a form on a website with a <select><option> dropdown.

If a user selects a certain value on the dropdown, I would like this to open up a new page automatically as this value requires a totally different set of details to be entered.

Is this possible?

Thanks folks
 
Sort by date Sort by votes
you have an event called onChange for the select object. in this event you could call a javascript function that uses window.open to open a new window

--------------------------
"two wrongs don't make a right, but three lefts do" - the unknown sage
 
Upvote 0 Downvote
Is it possible to stay in the same window instead of open a new one?

Am I on the right track with something like this

<select>
<option>Please Select...</option>
<option value='1'>1</option>
<option value='2' onChange="window.open('<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
</select>

If the user selects 2 it loads a complete new form, if they select anything else the form behaves as it normally would.
 
Upvote 0 Downvote
you can open a page in the same window either by using frames or by using iframes.
anyway, the onChange event is for the select not for the option element. and you can use a switch case block to see what option was selected and do an action accordingly

--------------------------
"two wrongs don't make a right, but three lefts do" - the unknown sage
 
Upvote 0 Downvote
If that doesn't work here's another way - (Not sure if the 'onSelect' will work in that example)

<script language ="javascript">

function funcNewURL()
{
if(document.formname.DropDownList.options[1].selected == true)
{
window.location="somewhere";
}
else if(document.formname.DropDownList.options[2].selected == true)
{
window.location="window.location=' }
else if etc etc.
}

</script>

<select name="DropDownList" onChange="funcNewURL">
<option>Please Select...</option>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
</select>
 
Upvote 0 Downvote
Hi stewartwebb

I get an error on the window.location line near the // on the url.

thanks for the help
 
Upvote 0 Downvote
Thats strange i've just tried it and it's worked for me. Have you copied the quick change i'v done in the posting under the example (the example window.location is wrong and errors will occur)

Copy is line in your javascript again and let me know what happens -

window.location="
If it doesn't work can you post all your code so I can have a quick look at it i'd guess it's something else in the page not working.

Cheers

Stewart
 
Upvote 0 Downvote
hi, here's the code I`m using

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language ="javascript">

function funcNewURL()
{
if(document.formname.DropDownList.options[1].selected == true)
{
window.location="somewhere";
}
else if(document.formname.DropDownList.options[2].selected == true)
{
window.location=" }
else if etc etc.
}

</script>


</head>

<body>

<select name="DropDownList" onChange="funcNewURL">
<option>Please Select...</option>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
</select>



</body>
</html>
 
Upvote 0 Downvote
Copy and paste this it works now.

Couple of things you'll need to do - in the window.location i've redirected it to hotmail you'll have to change it to being the page you want to display. Also at the moment only option 2 will redirect the user in the function 'funcNewURL()' you'll need to include the addresses for the other options in the function.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="javascript">

function funcNewURL()
{
if(document.form1.DropDownList.options[2].selected == true)
{
window.location=" }
}
</script>
</head>

<body>
<form method="post" name="form1">

<select name="DropDownList" onChange="funcNewURL();">
<option>Please Select...</option>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
</select>


</form>
</body>
</html>
 
Upvote 0 Downvote
genious matey, if there were an option to give 10 stars....

It is exactly what I wanted to achieve, thanks again.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

malpa
  • Locked
  • Question
Graph the selection of a html table row
Replies
0
Views
820
malpa
malpa
Kennelbloke
  • Locked
  • Question
Can't Get Markers to show on Map
Replies
0
Views
1K
Kennelbloke
Kennelbloke
TheLazyPig
  • Locked
  • Question
Dropdown (option) using Anguarjs
Replies
0
Views
678
TheLazyPig
TheLazyPig
rogerte
  • Locked
  • Question
Code that works on Windows, Android and Iphone
Replies
0
Views
739
rogerte
rogerte
JScannell
  • Locked
  • Question
Javascript issue on iPhone/iMac platforms
Replies
0
Views
782
JScannell
JScannell

Part and Inventory Search

Sponsor

Back
Top