Help - Search - Members - Calendar
Full Version: Change form action using radio buttons
HTMLHelp Forums > Programming > Client-side Scripting
sprocketme2
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!
Christian J
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
Please see the FAQ entry Can I have two or more actions in the same form?
sprocketme2
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
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>
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2014 Invision Power Services, Inc.