HTMLHelp Forums > Change form action using radio buttons

Full Version: Change form action using radio buttons

HTMLHelp Forums > Programming > Client-side Scripting

sprocketme2

Nov 25 2008, 04:21 PM

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

Nov 25 2008, 04:44 PM

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

(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

Please see the FAQ entry Can I have two or more actions in the same form?

sprocketme2

Nov 25 2008, 07:28 PM

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

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>


<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>



<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>



<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>



<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>


</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.