JavaScript Primers #18

By Joe Burns

http://www.htmlgoodies.com/primers/jsp/article.php/3478301/JavaScript-Primers-18.htm (Back to article)

Use these to jump around or read it all

The Concept

This primer takes Primer #17 a little further. Here again you'll transfer information into the function, but this time you'll transfer a string that the user enters into a field. The string will then be used to search Yahoo.

The Script

<SCRIPT type="text/javascript">

function Gofindit(){
 var searchfor = document.formsearch.findthis.value;    
{                                
 var FullSearchUrl = 
"http://av.yahoo.com/bin/query?p=" + searchfor ;
location.href = FullSearchUrl;
}}

</SCRIPT>

<FORM NAME="formsearch" action="">
Search Yahoo for:
<INPUT NAME="findthis" SIZE="40" TYPE="texT">
<INPUT TYPE="button" VALUE="Go Find It"
onClick="Gofindit()">
</FORM>

The Script's Effect

Deconstructing the Script

This script again requires that you have a solid grasp on the concepts of hierarchy. It comes into play a few times.

• First off, a function is created that calls for the variable "searchfor". This variable is the result of something in the document, in something called formsearch, inside an item called findthis, which has a value.
  
• Now, we do another function inside a function. See the second set of {brackets}?
  
• Another variable is created called "FullSearchUrl" that is the address to Yahoo's search engine plus the input of document.formsearch.findthis.value in the form of the variable "searchfor".
  
• Finally, the location.href is set as the variable "FullSearchUrl". The process will take all the information and send the user to that page when the function is triggered.
  
• Now, we move on to the FORM commands. There are two: One is a TEXT box that receives a string from the user and the other is a button that enacts the function.
  
• Note the entire form is named "formsearch". Remember that from the hierarchy statement above?
  
• Next, the TEXT box is named "findthis". Remember that in the hierarchy statement from above? See it building from larger to smaller?
  
• The button then has the onClick command that fires up the function.
  
• Finally, make sure you have a </FORM> command to kill the form. Mission accomplished.

What You Have Learned

Your Assignment

Alter the script so that it searches a search engine other than Yahoo. Also, make it so that when the user clicks, an alert pops up that reads "Going to Search..."