Thursday, March 28, 2024

HTML Goodies: Script Tip: Week 42

 

Forty-Tip-Two…

     When I started JavaGoodies, oh so long ago, I was sent a lot of scripts that were posted straightaway. I needed to fill space at first. As the months went on, I became more selective in what should be posted. I guess the two biggest criteria in posting a script were: is it original and is it functional?

     I received a bunch of scripts that would change the background of a page using everything from Event Handlers to a person’s name to make the change. Clever… but not overly useful. Once you have the basic concept of changing the background color, you pretty much can take it from there.

     This script was sent to me by a gentleman named Mujib. It’s a multiple search engine script. The script was much larger than you see it here. I’ve cut it down a bit for this series of Script Tips. It used to search ten different engines, now it’ll only do five. Of course, by the end you know it well enough to add as many searches as you’d like.

     The script is quite functional in that it allows many searches from one page. Results are posted in a new window so you never leave the search page. Plus, you don’t have to perform each search individually. You could put in a keyword (or keywords, cleverly enough) and all five search engines will return their results in five separate windows.

     It’s a very helpful, and involved, script. People have been asking that I get into some more advanced JavaScript. Well, this should fit the bill.

     First off, try it out and then grab the code.


Enter the Keyword :

Select the Search Engine(s):
Yahoo
Altavista
WebCrawler
Excite
Lycos


Here's the Code

(It's big. Get it all.)


     As with most scripts that include FORM elements, I want to start with them. If you're a regular Script Tip reader than you're probably familiar with NAMEs and VALUEs. Still, read this over. You'll find this form used in a different way than you're used to.

     The form code looks like this:

<FORM NAME="searching">

Enter the Keyword :
<INPUT TYPE="text" NAME="query" SIZE=15>

<b>Select the Search Engine(s):</b>

<INPUT TYPE="checkbox" NAME="yahoo"
VALUE="http://search.yahoo.com/search?p="> Yahoo

<INPUT TYPE="checkbox" NAME="altavista"
VALUE="http://www.altavista.digital.com/cgi-bin/query?pg=q&what=web&fmt=.&q=">Altavista

<INPUT TYPE="checkbox" NAME="webcrawler"
VALUE="http://www.webcrawler.com/cgi-bin/WebQuery?searchText=">WebCrawler

<INPUT TYPE="checkbox" NAME="excite"
VALUE="http://www.excite.com/search.gw?trace=a&search=">Excite

<INPUT TYPE="checkbox" NAME="lycos"
VALUE="http://www.lycos.com/cgi-bin/pursuit?query=">Lycos

<INPUT TYPE="button" VALUE="Search" onClick="search()">
<INPUT TYPE="reset" VALUE=" Clear ">
</FORM>

     Okay, three things to look for here. First is the text box where the user enters the keyword to be searched. The second is the code that allows the choice of search engines, and third is the button that triggers the function to search.

NAMEs

     The name of the FORM itself is "searching." The text box name is "query." Each of the Checkboxes are given the name of the search engine they represent.

     Finally, the button will trigger a function called
search().

     Now we know enough to start constructing hierarchy statements, but unlike other forms we've dealt with here, this has multiple hierarchy statements depending on what the user chose. We'll get into how the JavaScript knows which has been clicked later.

The Checkboxes

     Yes, this could have also been done with radio buttonsand, with some special coding, a drop-down menu. The reason the author chose checkboxes is that it allowed the user to check as many as desired. It didn't limit the choice. Let's look at the first checkbox code:

<INPUT TYPE="checkbox" NAME="yahoo"
VALUE="http://search.yahoo.com/search?p="> Yahoo

     It's a basic INPUT TYPE="checkbox" format. This checkbox represents Yahoo!, so that's the NAME. Now, here's the trick. See the VALUE? That VALUE is the URL that attaches to the Yahoo! search engine. If you attached the keywords entered by the user to the end of that URL, you'd get a search performed.

     Same with the other four checkboxes. The VALUEs are equal to the URL required to perform a search on that particular engine. The code is pretty easy to find. You just go to the search page of the engine and look at the source code. I'm sure that's where the author got it.

     So we have a text box that assigns the variable "query" to keywords. We also have checkboxes that return URLs of search engines. Put the two together and you get a full search string. Seeing the process yet?

Next Week: What If There's A Space?


Learn to write your own JavaScripts with the

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Popular Articles

Featured