Swiching Panel - javascript?

**dakedee** · 01-09-2007, 08:39 AM

Hi All,

I have an idea to make a search function for my website with has 3 different options: search by keywords, search by year and advance search. But I would like to put all the 3 search options on the same panel, so that users don't need to scroll down or click to load another page.

Have a look at http://www.travelocity.com/ or http://www.expedia.com/, when you click to choose "flight" or "hotel" or etc. then the search options are changed accordingly. (I would just change from radio buttons to normal links)

I have been looking around on this website for such a code to make the panel or that i can study and apply, but could not find anything.

Anybody know how to make such a panel?

Many thanks!

**jscheuer1** · 01-09-2007, 06:06 PM

Generally the best way to do something like this is to have all of the various optional form elements available and hard coded into the HTML. You can set the display style property of those that are not required in a particular view to 'none'. This can key off a simple link button or whatever. Several of these may be used for multiple views. Say you have a field for the date but, this is only going to be used when searching by date. If the default state of the form is to search by content, this field can start out display:none -

HTML Code:

<input id="date" name="date" type="text" style="display:none;">
<span style="cursor:pointer;" onclick="document.getElementById('date').style.display='inline';">Search by Date</span>
 <span style="cursor:pointer;" onclick="document.getElementById('date').style.display='none';">Search by Content</span>

As more and more of these optional fields are included, you would also probably want to remove the display of some while enabling it for others, using the same click. This is where you would want to put the various actions you want performed into a javascript function and call that onclick instead of trying to cram all of your instructions into the HTML portion of the code.

**dakedee** · 04-04-2007, 01:12 PM

Hi John,

I have tried the code that you suggested, and it works well. Thank you so much.

There is one thing though, what if i want to set the buttons to different style (color, underline,..) after they have been clicked. so that the users know where there are.

can we also specify this as well?

thanks for advice!

**jscheuer1** · 04-04-2007, 03:04 PM

Yes but, that's where the part I mentioned about making up a separate function comes in because, not only would we want to change the currently clicked item to look 'active' but, also remove this quality from any that are now 'inactive', while at the same time carrying out the actual change to the display of the form. It's Really more code than you want to cram into the body HTML portion of a page.

Something like so:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function togField(fld, state, ael, ina){
document.getElementById(fld).style.display=state;
ael.style.textDecoration='underline';
document.getElementById(ina).style.textDecoration='none';
}
</script>
</head>
<body>
<input id="date" name="date" type="text" style="display:none;"><br>
<span id="bydate" style="cursor:pointer;" onclick="togField('date','inline',this,'bycontent');">Search by Date</span><br>
 <span id="bycontent" style="cursor:pointer;text-decoration:underline;" onclick="togField('date','none',this,'bydate');">Search by Content</span>
</body>
</html>

**dakedee** · 04-04-2007, 03:27 PM

hmmm i really have to learn a lot more...

anyway many thank! john

Thread: Swiching Panel - javascript?

Thread Tools

Search Thread

Swiching Panel - javascript?

Bookmarks

Bookmarks

Posting Permissions