Change form action using radio buttons |
Change form action using radio buttons |
sprocketme2 |
Nov 25 2008, 04:21 PM
Post
#1
|
Group: Members Posts: 2 Joined: 25-November 08 Member No.: 7,191 |
I am wanting to make a search box that will either google web search google image search or youtube video search depending on which radio button is selected. If im being unclear, I want one search box and 3 radio buttons, one for web image and video. I have looked around and found that I need to use something like:
CODE <input type="radio" name="searchtype" onclick="changeAction(http://www.google.com/search)">Web <input type="radio" name="searchtype" onclick="this.searchbox.action=http://images.google.com/images">Images <input type="radio" name="searchtype" onclick="http://www.youtube.com/results">Videos So here is the entire code for my page: CODE <html> <body> <form method="get" name="searchbox" action="this_value_should_change"> <input type="text" name="q" size="30" maxlength="255" value="" /><br> <input type="radio" name="searchtype" onclick="this.searchbox.action=http://www.google.com/search">Web<br> <input type="radio" name="searchtype" onclick="this.searchbox.action=http://images.google.com/images">Images<br> <input type="radio" name="searchtype" onclick="this.searchbox.action=http://www.youtube.com/results">Videos<br> <input type="submit" /> </form> </body> </html> The problem is that the form's action is not set when you check one of the radio buttons. Please help as I have tried everything I know how to. Thanks in advance! This post has been edited by sprocketme2: Nov 25 2008, 04:23 PM |
Christian J |
Nov 25 2008, 04:44 PM
Post
#2
|
. Group: WDG Moderators Posts: 9,661 Joined: 10-August 06 Member No.: 7 |
The "this" keyword applies to the element with the onclick event, so
CODE this.searchbox.action= sounds like "searchbox" was somehow part of the radio button and not the other way around. Instead you might use something like CODE <input type="radio" name="searchtype" onclick="document.searchbox.action='http://www.google.com/search';"> (note the single quotes). Note that this doesn't work for users without javascript. A better way might be to submit the form to a "jumper" page on your server, which then redirects the query depending to the chosen search engine. |
Darin McGrew |
Nov 25 2008, 05:32 PM
Post
#3
|
WDG Member Group: Root Admin Posts: 8,365 Joined: 4-August 06 From: Mountain View, CA Member No.: 3 |
Please see the FAQ entry Can I have two or more actions in the same form?
|
sprocketme2 |
Nov 25 2008, 07:28 PM
Post
#4
|
Group: Members Posts: 2 Joined: 25-November 08 Member No.: 7,191 |
Well, that worked, and I gotta say thanks. Ive been trying to get that right for days now but you solved my problem in minutes. Again, thank you very much.
|
saqib |
Sep 29 2011, 08:46 AM
Post
#5
|
Group: Members Posts: 1 Joined: 29-September 11 Member No.: 15,518 |
Hello You can use this HTML code..
Google+Bing+Yahoo+ YouTube you can add one more option "Google Image" Download Attachment and see Demo. The CODE Is <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Test page</title> </head> <body style="padding:0px; margin:0px; overflow:hidden;"> <div style="position:absolute; width:100%; height:100%; margin:0px; padding:0px; left:0px; right:0px;z-index:1"><img src="Data\bg.jpg" width="100%" height="100%"></div> <div style="z-index:2; position:absolute; margin:0px; padding:0px; height:100%; width:100%; overflow:scroll;"> <p> </p> <p></p> <!-- Search Google --> <center> <FORM method=GET action="http://www.google.com/search"> <input type=hidden name=ie value=UTF-8> <input type=hidden name=oe value=UTF-8> <TABLE bgcolor=""><tr><td> <A HREF="http://www.googl.com"> <IMG SRC="data/google.png" border="0" ALT="Google" align="absmiddle"></A> <INPUT TYPE=text name=q size=25 maxlength=255 value=""> <INPUT type=submit name=btnG VALUE="Google Search"> </td></tr></TABLE> </FORM> </center> <!-- Search Google --> <!-- Search Youtube --> <center> <FORM method=GET action="http://www.youtube.com/results"> <input type=hidden name=ie value=UTF-8> <input type=hidden name=oe value=UTF-8> <TABLE bgcolor=""><tr><td> <A HREF="http://www.youtube.com/"> <IMG SRC="data/youtube.png" border="0" ALT="you tube" align="absmiddle"></A> <INPUT TYPE=text name=q size=25 maxlength=255 value=""> <INPUT type=submit name=btnG VALUE="Video Search"> </td></tr></TABLE> </FORM> </center> <!-- Search Youtube --> <!-- Search Bing --> <center> <FORM method=GET action="http://www.bing.com/search"> <input type=hidden name=ie value=UTF-8> <input type=hidden name=oe value=UTF-8> <TABLE bgcolor=""><tr><td> <A HREF="http://www.bing.com/"> <IMG SRC="data/bing.png" border="0" ALT="bing" align="absmiddle"></A> <INPUT TYPE=text name=q size=25 maxlength=255 value=""> <INPUT type=submit name=btnG VALUE="bing Search"> </td></tr></TABLE> </FORM> </center> <!-- Search bing --> <!-- Search Yahoo --> <center> <FORM method=GET action="http://search.yahoo.com/search"> <input type=hidden name=ie value=UTF-8> <input type=hidden name=oe value=UTF-8> <TABLE bgcolor=""><tr><td> <A HREF="http://www.yahoo.com/"> <IMG SRC="data/yahoo.png" border="0" ALT="Yahoo!" align="absmiddle"></A> <INPUT TYPE=text name=q size=25 maxlength=255 value=""> <INPUT type=submit name=btnG VALUE="yahoo Search"> </td></tr></TABLE> </FORM> </center> <!-- Search Yahoo --> </div></body></html> |
Lo-Fi Version | Time is now: 27th April 2024 - 09:57 PM |