View Full Version : I don't understand this tabbed search form

03-17-2009, 06:13 AM
I'm trying to make a tabbed search form and I came across this (http://woork.blogspot.com/2008/01/tabbed-search-bar-using-css-and.html) tutorial which does exactly what I need.

But I'm having trouble wrapping my head around it. How would I go about adding different form actions while keeping them hidden, so that only one search form is showing?

For instance: Let's say I wanted to have the search form on WEB to search Google (I can set up the form) but how do I make it so the action changes when you click on IMAGES (let's say I wanted it to search Google Images - again, I can set up the form for that, but how do I make it so the action changes when clicking the tab?)

Any ideas?


Old Pedant
03-17-2009, 07:38 AM

Just change the action property of the <FORM>.

Or, you know, you *could* simply have multiple <FORM>s. Just make sure they don't overlap.

03-17-2009, 07:56 AM
Thanks so much for your reply.

I'm still a bit confused as to how I would integrate that though. So far I have this (from the tutorial)

<div id="main">
<ul class="search-options">
<li id="tab1" class="selected"><a href="#" onclick="javascript:setSearchOptions(1);">Web</a></li>
<li id="tab2"><a href="#" onclick="javascript:setSearchOptions(2);">Images</a></li>
<li id="tab3"><a href="#" onclick="javascript:setSearchOptions(3);">Videos</a></li>
<div id="search-bar">
<form id="form1" name="form1" method="get" action="http://search.google.com">
<input name="" type="text" class="search-style" id="searchq" size="40"/>
<input type="hidden" name="searchopt" id="searchopt" />

Where and how in there could I add another form? Excuse my ignorance, I've really been trying to figure this out for a while now :)

03-17-2009, 10:17 PM
Sorry to be a bother but can someone show me a guiding light? :D

Old Pedant
03-18-2009, 02:29 AM
Ahhh...would be more trouble to use multiple forms than it's worth, probably.

So I'd just change the action of the form.

In your JS setSearchOptions function, you would change the action depending on the value of the argument.


function setSearchOptions( which )
var form = document.form1;
switch (which)
case 1:
form.action = "http://www.google.com";
// see below
case 2:
form.action = "http://images.google.com/images";
// see below
case 3:
form.action = "http://video.google.com/videosearch"
// see below
... the existing code for the function ...

We could have used an array for more compact code, but I opted for the switch because there might be other things you want to put into the <FORM> fields, depending on what kind of search is used. And if just changing the action is enough, this still works.