The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Using forms to open different links, Can I use variables to open different links?
olavito
post Oct 9 2006, 09:41 PM
Post #1





Group: Members
Posts: 3
Joined: 9-October 06
Member No.: 380



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
dougmanic
post Oct 9 2006, 10:13 PM
Post #2


Newbie
*

Group: Members
Posts: 19
Joined: 3-October 06
Member No.: 320



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
olavito
post Oct 9 2006, 11:01 PM
Post #3





Group: Members
Posts: 3
Joined: 9-October 06
Member No.: 380



QUOTE(dougmanic @ Oct 9 2006, 11:13 PM) *

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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
dougmanic
post Oct 9 2006, 11:20 PM
Post #4


Newbie
*

Group: Members
Posts: 19
Joined: 3-October 06
Member No.: 320



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/.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
jacknicholson1974
post Oct 10 2006, 01:43 AM
Post #5





Group: Members
Posts: 2
Joined: 8-October 06
Member No.: 372



You start your form like this:
<form method="post action=......">
Try writing it like this:
<form method="post" action=".....">
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Oct 10 2006, 06:23 AM
Post #6


.
********

Group: WDG Moderators
Posts: 7,965
Joined: 10-August 06
Member No.: 7



QUOTE(dougmanic @ Oct 10 2006, 06:20 AM) *

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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
olavito
post Oct 10 2006, 07:28 AM
Post #7





Group: Members
Posts: 3
Joined: 9-October 06
Member No.: 380



Thank you thank you thank you! The value=red solved the problem!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 13th December 2018 - 01:28 PM