Using forms to open different links, Can I use variables to open different links? Options

[olavito]

I thought this would be so easy but I have spent all day looking for the answer.

http://www.seat9k.com/dropdown.html

What I would like to do is direct the user to a new page that is indicated by the different options chosen by the user.

If the user chooses "DOG" and "RED", upon hitting SUBMIT a new window would open:

http://www.seat9k.com/dogred.html

I cannot figure out how to do this, and it seems like it should be obvious.

Any help greatly appreciated.

[dougmanic]

First you want to close all your option tags:

CODE

<option>Dog</option>
<option>Bird</option>

Second, on your line with the submit button, change the onclick attribute to:

CODE

... onClick="window.open('http://www.seat9k.com/' + Animal.value + Color.value + '.html')">.....

It should work, if you have 6 different pages for each of the 6 combinations.

This post has been edited by dougmanic: Oct 9 2006, 10:14 PM

[olavito]

First you want to close all your option tags:

CODE

<option>Dog</option>
<option>Bird</option>

Second, on your line with the submit button, change the onclick attribute to:

CODE

... onClick="window.open('http://www.seat9k.com/' + Animal.value + Color.value + '.html')">.....

It should work, if you have 6 different pages for each of the 6 combinations.

I updated the site based on your recommendations, and unfortunately it didn't work. It made sense, though!

The code I now have is:

<form method=post action="http://www.seat9k.com/" name="animalcolors">
<table bgcolor="#FFFF66" border=5 cellspacing=5 cellpadding=5 align=left width=33.3%>

<tr valign=top><td colspan=2 align=center>Region Charts</td></tr>

<tr>
<td align=right width=50%>Animal:</td>
<td width=50%>
<select name=Animal id="option1" size=1>
<option>Dog</option>
<option>Cat</option>
<option>Bird</option>
</select></td></tr>

<tr>
<td align=right>Color:</td>
<td>
<select name=Color id="option2" size=1>
<option>Red</option>
<option>Green</option>
<option>Yellow</option>
</select></td></tr>

<tr valign=top><td colspan=2 align=center>
<input type=button value="Submit"
onClick="window.open('http://www.seat9k.com/'+Animal.value+Color.value+'.html')">
</td></tr>
</table>
</form>

[dougmanic]

Oh okay. Try this:

CODE

<form method=post action="http://www.seat9k.com/" name="animalcolors">
<table bgcolor="#FFFF66" border=5 cellspacing=5 cellpadding=5 align=left width=33.3%>

<tr valign=top><td colspan=2 align=center>Region Charts</td></tr>

<tr>
<td align=right width=50%>Animal:</td>
<td width=50%>
<select name=Animal id="option1" size=1>
<option value=dog>Dog</option>
<option value=cat>Cat</option>
<option value=bird>Bird</option>
</select></td></tr>

<tr>
<td align=right>Color:</td>
<td>
<select name=Color id="option2" size=1>
<option value=red>Red</option>
<option value=green>Green</option>
<option value=yellow>Yellow</option>
</select></td></tr>

<tr valign=top><td colspan=2 align=center>
<input type=button value="Submit" onClick="window.open('http://www.seat9k.com/'+Animal.value+Color.value+'.html')">
</td></tr>
</table>
</form>

Give every option a value attribute. Because each selection has no value, it'll move to the site http://www.seat9k.com/.html/.

[jacknicholson1974]

You start your form like this:
<form method="post action=......">
Try writing it like this:
<form method="post" action=".....">

[Christian J]

Oh okay. Try this:

CODE

<form method=post action="http://www.seat9k.com/" name="animalcolors">
<table bgcolor="#FFFF66" border=5 cellspacing=5 cellpadding=5 align=left width=33.3%>

<tr valign=top><td colspan=2 align=center>Region Charts</td></tr>

<tr>
<td align=right width=50%>Animal:</td>
<td width=50%>
<select name=Animal id="option1" size=1>
<option value=dog>Dog</option>
<option value=cat>Cat</option>
<option value=bird>Bird</option>
</select></td></tr>

<tr>
<td align=right>Color:</td>
<td>
<select name=Color id="option2" size=1>
<option value=red>Red</option>
<option value=green>Green</option>
<option value=yellow>Yellow</option>
</select></td></tr>

<tr valign=top><td colspan=2 align=center>
<input type=button value="Submit" onClick="window.open('http://www.seat9k.com/'+Animal.value+Color.value+'.html')">
</td></tr>
</table>
</form>

Note that the menu will not work if javascript is disabled. See also http://www.cs.tut.fi/~jkorpela/forms/navmenu.html

[olavito]

Thank you thank you thank you! The value=red solved the problem!