Tutorial:one search form for many different search options

Discussion in 'JavaScript' started by sartajc, Dec 22, 2006.

  1. #1
    Hey guys, I thought i would introduce myself to this forum by posting my own tutorial. I made this script with the help of a few people from lots of different sites, so heres the final product:


    Check it out in action here: www.muslimonline.org (cant post live links yet..)

    Many of you guys want to be able to search many parts of your site, and i did too. so have some extensive research i finally found a way to do it. Check it out.

    First, add this javascript code inside the <body> .
    <!--Multiple Search coding by muslimonline.org. please dont remove this -->
    <!-- the javascript -->
    <script type="text/javascript">
    function updateSearch(params,frm) {
        var data = params.split(">>>");
        frm.method = data[0];
        frm.action = data[1];
        document.getElementById("searchBox").name = data[2];
    }
    </script>
    HTML:
    Next, you start making your form.
    Now what you have to do is convert each for to something similar to this:

    <option value="
    (Form Method Here)>>>(Form Action Here)>>>(Search Input Name here)>
    Code (markup):
    Now look at the following simple search form:

    <form action="http://muslimonline.org/act=Search&CODE=01&forums=all" method="post" target="_blank" >  <input type="text" size="15" name="keywords" onfocus="this.value=''" value="search..." />  <br /> &nbsp;&nbsp;<input type="submit" value="Search">  </form>
    HTML:
    As you can see, there is a form action , form method, and input name. You have to get those names and make them into the template i stated above. So it would end up like this:

    <option value="post>>>http://muslimonline.org/index.php?act=Search&CODE=01&forums=all>>>keywords">
    HTML:
    Now do this with all of the search engines you add to this.

       <option value="get>>>http://muslimonline.org/sitesearch.html>>>q">Entire Site</option>
            <option value="post>>>http://muslimonline.org/index.php?act=Search>>>keywords">in Forum</option>
            <option value="post>>>http://muslimonline.org/arcade.html>>>gsearch">
    HTML:
    When you are done, add the options values as seen below:

    <!-- make sure to set the default form correctly --> 
    <form method="get" action="http://muslimonline.org/sitesearch.html"> <input type="text" id="searchBox" name="q" /> 
    <select onchange="updateSearch(this.value,this.form);"> 
    <!--put your forms here -->  
    <option value="get>>>http://muslimonline.org/sitesearch.html>>>q">Entire Site</option> 
     <option value="post>>>http://muslimonline.org/index.php?act=Search>>>keywords">in Forum</option> 
     <option value="post>>>http://muslimonline.org/arcade.html>>>gsearch">in Arcade</option>  
    <option value="post>>>http://www.muslimonline.org/index.php?act=quran&op=search>>>query">in Quran</option>
      <option value="post>>>http://muslimonline.org/cgi-bin/hadith.cgi>>>phrase">in Hadith</option>
      </select>
     <input type="submit" value="Search Hadith"> </form>
    HTML:
    If you noticed, i made the form method, action, and input name the same as the first option. You do this too.

    
    <form method="get" action="http://muslimonline.org/sitesearch.html">
    <input type="text" id="searchBox" name="q" /> 
    HTML:
    Also, if you have a form that requires those hidden options and values, just add them after the </select> tag. For example, my google sitesearch needs hidden tags:

    <input type="hidden" name="search_type" value="0"></input>
        <input type="hidden" name="domains" value="muslimonline.org"></input>
        <input type="hidden" name="sitesearch" value="muslimonline.org" checked id="ss1"></input>
        <input type="hidden" name="client" value="pub-5483738103902414"></input>
    
        <input type="hidden" name="forid" value="1"></input>
        <input type="hidden" name="channel" value="6093650874"></input>
        <input type="hidden" name="ie" value="windows-1256"></input>
        <input type="hidden" name="oe" value="windows-1256"></input>
        <input type="hidden" name="safe" value="active"></input>
        <input type="hidden" name="cof" value="GALT:#CCCCCC;GL:1;DIV:#FFFFFF;VLC:66FF00;AH:center;BGC:FFFFFF;LBGC:FFFFFF;ALC:38B63C;LC:38B63C;T:330033;GFNT:CCCCCC;GIMP:CCCCCC;FORID:11"></input>
        <input type="hidden" name="hl" value="en"></input>
    HTML:
    So finally when you put it all together and add some style you might end up with something like this:

    
    <!--Multiple Search coding by muslimonline.org. please dont remove this -->
    <!-- the javascript -->
    <script type="text/javascript"> function updateSearch(params,frm) { var data = params.split(">>>"); frm.method = data[0]; frm.action = data[1]; document.getElementById("searchBox").name = data[2]; } </script> 
    
    <!-- make sure to set the default form correctly --> 
    <form method="get" action="http://muslimonline.org/sitesearch.html">
    <input type="text" id="searchBox" name="q" value="search for..." onfocus="this.value=''" size="15" style="border: 1px solid #99cc99;" />
    <select onchange="updateSearch(this.value,this.form);" style="border: 1px solid #99cc99;"> 
    
    <!--put your forms here --> 
    option value="get>>>http://muslimonline.org/sitesearch.html>>>q">Entire Site</option>
    <option value="post>>>http://muslimonline.org/index.php?act=Search>>>keywords">in Forum</option>
      <option value="post>>>http://muslimonline.org/arcade.html>>>gsearch">in Arcade</option>
      <option value="post>>>http://www.muslimonline.org/index.php?act=quran&op=search>>>query">in Quran</option> 
     <option value="post>>>http://muslimonline.org/cgi-bin/hadith.cgi>>>phrase">in Hadith</option>
      </select> 
     <input type="hidden" name="search_type" value="0"></input>  <input type="hidden" name="domains" value="muslimonline.org"></input>  <input type="hidden" name="sitesearch" value="muslimonline.org" checked id="ss1"></input> 
     <input type="hidden" name="client" value="pub-5483738103902414"></input>  
    <input type="hidden" name="forid" value="1"></input> 
     <input type="hidden" name="channel" value="6093650874"></input>
      <input type="hidden" name="ie" value="windows-1256"></input> 
     <input type="hidden" name="oe" value="windows-1256"></input> 
     <input type="hidden" name="safe" value="active"></input> 
     <input type="hidden" name="cof" value="GALT:#CCCCCC;GL:1;DIV:#FFFFFF;VLC:66FF00;AH:center;BGC:FFFFFF;LBGC:FFFFFF;ALC:38B63C;LC:38B63C;T:330033;GFNT:CCCCCC;GIMP:CCCCCC;FORID:11"></input> 
     <input type="hidden" name="hl" value="en"></input>
     &nbsp;&nbsp;&nbsp;&nbsp; </form> 
    
    HTML:
    hope that made sense.
     
    sartajc, Dec 22, 2006 IP
  2. Cypherus

    Cypherus Peon

    Messages:
    1,551
    Likes Received:
    102
    Best Answers:
    0
    Trophy Points:
    0
    #2
    what about those who doesn't support JS?
     
    Cypherus, Dec 22, 2006 IP
  3. sartajc

    sartajc Peon

    Messages:
    6
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    do you mean like browsers that dont support javascript?
     
    sartajc, Dec 24, 2006 IP