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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    I don't understand this tabbed search form

    I'm trying to make a tabbed search form and I came across this 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?

    Thanks!

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,613
    Thanks
    80
    Thanked 4,635 Times in 4,597 Posts
    document.forms[0].action='http://images.google.com/images';

    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.

  • Users who have thanked Old Pedant for this post:

    ifyourmother (03-17-2009)

  • #3
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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)

    Code:
    <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>
    </ul>
    <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" />
    </form>
    </div>
    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

  • #4
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Sorry to be a bother but can someone show me a guiding light?

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,613
    Thanks
    80
    Thanked 4,635 Times in 4,597 Posts
    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.

    *SOMETHING* like:
    Code:
    function setSearchOptions( which )
    {
         var form = document.form1;
         switch (which)
         {
              case 1: 
                   form.action = "http://www.google.com";
                   // see below
                   break;
              case 2:
                   form.action = "http://images.google.com/images";
                   // see below
                   break;
              case 3:
                   form.action = "http://video.google.com/videosearch"
                   // see below
                   break;
        }
        ... 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.


  •  

    Posting Permissions

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