Hello and welcome to our community! Is this your first visit?
Register
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
    Posts
    96
    Thanks
    11
    Thanked 0 Times in 0 Posts

    Pointer please for dynamic form

    Hi,

    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

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,133
    Thanks
    75
    Thanked 4,338 Times in 4,304 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....

    So:
    Code:
    <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";
        }
    }
    </script>
    ...
    
    <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>
    <div id="SearchVideos">
       ... form fields for video searches ...
    </div>
    <div id="SearchAudios">
       ... form fields for audio searches ...
    </div>
    ...
    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
    •