The Multi-Search Tutorial Page

Here is the HTML code in the BODY area. It consists of two FORMs: one for the checkboxes and another for the text of the query and the buttons.

<FORM NAME="search">
  <INPUT NAME="altavista"  TYPE=CHECKBOX>  AltaVista
  <INPUT NAME="yahoo"      TYPE=CHECKBOX>  Yahoo,
  <INPUT NAME="infoseek"   TYPE=CHECKBOX>  Infoseek,
  <INPUT NAME="lycos"      TYPE=CHECKBOX>  Lycos,
  <INPUT NAME="webcrawler" TYPE=CHECKBOX>  WebCrawler,
  <INPUT NAME="excite"     TYPE=CHECKBOX>  Excite
</FORM>

<FORM NAME="text" ONSUBMIT="run()">
  <INPUT NAME="query" TYPE=TEXT VALUE="" SIZE=50>
  <INPUT TYPE=BUTTON VALUE="Go for it!" ONCLICK="run()">
  <INPUT TYPE=RESET VALUE="Clear">
</FORM>

In the first FORM, you can change the boolean values (Is an engine selected or not?) by checking or unchecking the boxes. The boolean for AltaVista will be referenced in the javascript as document.search.altavista.value.

The second one contains a text field called query which will be the argument of the search engines.
There is also a submit button that, when activated (ONCLICK attribute), triggers the run() routine of the javascript.
The same routine run() appears in the header of the FORM with the ONSUBMIT attribute. It is called when the user finishes the text entry with the [Return] key instead of pushing the submit button. Thus, both methods of validation are correct.
Finally, there is a RESET button that enables the user to restore the initial state of the text field (empty in this case). As we only want to clear the text field and not the earlier checkboxes, we had to create two different FORMs to reduce the range of the RESET button.

Now with the javascript itself... There is only one routine called run() that does all the job.

function run() {
  var request = document.text.query.value;
  var req = "";

  // replace blanks by the + sign:

  for(var i = 0; i < request.length; i++) {
    var ch;
    if((ch = request.substring(i, i + 1)) == " ") req += "+"; 
    else req += ch;
  }

  // call the selected engines:

  if(document.search.altavista.checked)
  {
  // open a browser window:
    var altavista = open(     
  // at URL:
    "http://www.altavista.digital.com/cgi-bin/query?q=" + req,
  // called altavista:
    "altavista"); 
  }

  if(document.search.yahoo.checked) 
  { 
    var yahoo = open(
    "http://av.yahoo.com/bin/search?p=" + req,
    "yahoo");
  }

  ...and so on with the other engines...
}

After retrieving the text value of the 'text' FORM in the variable request, it starts with processing this String variable. All the blanks in request have to be replaced by a plus symbol and that's what does the for loop; we will see why soon.
Then for each engine, the function tests if the user has selected it. If yes, a window is opened that runs the request query with the given search engine. For example if you run altavista, the browser opens a window called "altavista" (and deletes the old contents if it already existed) and displays the result of the request. The request string itself is composed of two parts:

the location of the search site immediately followed by the query program, a question mark and the variable name of the query with the symbol equal. For example http://www.altavista.digital.com/cgi-bin/query?q=
the query's text which has been processed. For example: "Microsoft sucks" will be replaced by "Microsoft+sucks"

The reason why we replace blanks is that an URL cannot contain blank caracters. They are replaced by the plus sign in the HyperText Transfer Protocol.

And this concludes the explanation of the script.

Back to the Multi-Search Page.
Quality hand made HTML since 1995