Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Mar 2009
    Thanked 0 Times in 0 Posts

    Pointer please for dynamic form


    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!


  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Thanked 4,743 Times in 4,705 Posts
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts