The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Change form action using radio buttons
sprocketme2
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Nov 25 2008, 04:44 PM
Post #2


.
********

Group: WDG Moderators
Posts: 9,628
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post 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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
sprocketme2
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
saqib
post 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>
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: 18th March 2024 - 09:44 PM