View Full Version : Pointer please for dynamic form

12-03-2009, 10:10 AM

I'm pretty new to javascript and ajax and need some help.

I want to create a form that has an advanced search page which changes the search fields that appear, depending on what the user clicks.

For example, at the top there are three buttons:
1. Search images 2. Search videos 3. Search audio

As a user clicks these I want different search fields to be shown on the page.

I have tried searching for a way to do this via Google, with no luck. Can someone point me in the correct direction (via a demo or tutorial) on how to do this?

I don't just want the answer as I really want to learn how to get this to work!

Thanks :)

Old Pedant
12-04-2009, 12:10 AM
Don't use a dynamic form.

Just use a static form where you hide the parts you don't want to see.

MUCH easier and much more reliable (browser-independent) and faster and....


<script type="text/javascript">
function showSearch( searchType )
var types = ["Images","Videos","Audios"];
for ( var t = 0; t < types.length; ++t )
document.getElementById("Search" + types[t]).style.display =
(types[t] == searchType) ? "block" : "none";

<form ...>
<input type=button value="Search images" onclick="showSearch('Images');" />
<input type=button value="Search videos" onclick="showSearch('Videos');" />
<input type=button value="Search audio" onclick="showSearch('Audios');" />
<div id="SearchImages">
... form fields for image searches ...
<div id="SearchVideos">
... form fields for video searches ...
<div id="SearchAudios">
... form fields for audio searches ...

It might even be simpler/more appropriate to your needs to simply have FOUR forms. One just for those 3 buttons. And then one for each of the searches.