HTML Goodies: Script Tip: Week 44

By Joe Burns



We've set up search URLs and created something that will check the entered text for spaces. Now, we'll do the search.

One last time, it looks like this.

Enter the Keyword:

Select the Search Engine(s):

Here's the Code

(It's big. Get it all.)

Since there are five search engines represented, I really only need to show you one section of the function because the other four follow the same format. Here's the top of the function triggered by the button, and the first search, Yahoo!

function search()

var keywords=document.searching.query.value;
var search1;
var search2;
var search3;
var search4;
var search5;



The function traditionally starts with function search() and then the curly bracket.
     Next a variable, "keywords", is set and assigned the value of what was written in the text box: document.searching.query.value.
     Next, five new variables are set, "search1" through "search5". They are not assigned any value yet. They are just being created now so that they will be available later to receive values.
     Next, we attach the output of the text box with the previous function that checked for spaces.


Here, the variable "key" is created and is assigned the value of wordsplit(keywords). Get what just happened? "Keywords" represents what was written into the text box. Since that variable name is within the instance of the function, it is given over to it. Thus, what was written into the text box is handed to the function wordsplit() in order to be checked for spaces.
     Remember that the results of that handing off are assigned the variable name "key". That means that "key" is now the text entered by the user with any spaces changed to plus signs. It's ready to be used in a search.
     Now we begin the If statements. There are five of them because there were five search engines to choose from.


It reads: If the checkbox Yahoo! is checked, then "search1" (remember creating that?) is to have the VALUE found in the checkbox representing Yahoo! (That's the search URL).
     Next "search1" is to have the variable "key" added to it. Remember that "key" is the text entered by the user. The addition takes place because of this operator: (+=). See that? It means to "concatenate" or build together.
     So now "search1" represents the entire URL plus the text to be searched. Now we need to open that URL in a new window.,"newwindow1","width=700,height=200,scrollbars=yes");

A new window opens using "search1" as its URL. That performs the search. The new window has the name of "newwindow1". It's 700 by 200, and it will have scrollbars.
     The second curly bracket ends this particular If statement.

But what if Yahoo! is not checked?

Then this particular If statement is not true and it is ignored. The script goes onto the next, and the next, and the next until one is correct.

But what if no checkboxes are checked?

Then none of the If elements are true and nothing happens. The script just sits there looking back at you.

Can we put up an alert saying to post?

Using the format we have here, it's a bit rough. Here's the catch 22: If we put an alert as a final "Else" statement, then that alert will pop up every time, no matter if the user checked a box or not.
     To prevent that Else being called on every time, you need to put an Else between every If statement. Then the alert only pops up when no other boxes are checked, but it limits the search capabilities because you then cannot choose multiple engines. As soon as the script runs into an If statement is finds true, it stops.
     I played around with some code, checking all of the Ifs in one shot, and it started to get to be too much code for what it produced. I'm happy with the page just sitting still if no search engines are checked. If you can find a quick method of altering the script to produce that alert and keep the function of the script the same, let me know. I'll be glad to post it.

So, there you go! A multiple search engine script. Next time we'll work on a script I put together using a smaller script. It's a Proportional Image script. You'll be able to load an image into the page, set a new height or width, and have the script figure out the correct proportions. Then, with the click of a button, you'll get to see the new sized image. It should be quite useful for those of you who write graphic-filled Web pages.

Next Week: Proportional Image Script

Learn to write your own JavaScripts with the HTML Goodies 30-Step Primer Series

Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
Thanks for your registration, follow us on our social networks to keep up-to-date