LSC 548
Tutorial - Beyond HTML

Simple Javascript
Tutorial Home
Forms
Simple Javascript


In this lesson, you will learn how to use simple javascript as an introduction to making the HTML forms interactive.

You will need three windows open on your screen at this time. A browser window displaying this tutorial, an experimental browser window to view your HTML document, and a window in which you will type the HTML document.

It is really beyond the scope of this course to teach you Javascript. Your textbook Introduction to Interactive Programming on the Internet using HTML & Javascript by Craig D. Knuckles (New York: John Wiley & Sons, Inc. 2001) does a great job of teaching programming principles using Javascript. Instead, I have looked at some common interactive catagories that may be of use on any library site and have shown associated javascript code.

Review the Form ...

The form object is defined through HTML tags <FORM> ... </FORM>.
The attributes of a form are:
NAME {optional} - a string of characters
ACTION {optional} - URL for the program that will execute the form.
METHOD {optional} - Either POST or GET -Provides for Interactivity
Here is an example:
<FORM NAME = "Example" ACTION = "http://library.salve.edu/programs/exe.pl" METHOD = "post">
    This area will be used to define the various form elements.
</FORM>
The Submit Button

Often the interactivity of the form is activated by a user pressing the submit button. This button is defined just like the other buttons, but using TYPE="submit" in the <INPUT> element. Here is an example:

<FORM NAME = "Example">
    <INPUT TYPE="submit" VALUE="Click here to Submit Form">

</FORM>

Here is what it looks like:

The submit button can create activity in two major ways. They are:
onClick - Event handler
submit() function - This function works behind the scenes and takes the input from the form and passes it to a program through the URL.
onClick Event handler ... Here is a simple example that uses the onClick event handler to activate a built-in alert box with text supplied by us.
<FORM NAME = "Example">
    <INPUT TYPE="submit" VALUE="Click here to see ALERT" onClick='alert("You clicked the submit button!")'>

</FORM>

Here is what it looks like:

Note: The Event Handler onClick is placed inside the <INPUT> element.

Contact Us ....

This is a useful link to have on your library page. Usually when you click on the link it takes you to an email message using "mailto:someone@library.org". Well, lets use the form tags and our submit button and the email together to let users interact more specifically. Here is an example of a feedback form:

<FORM NAME = "Example - Feedback" ACTION = "mailto:someone@library.org" METHOD = "post" ENCTYPE ="text/plain">
     Please give us your feedback ---<br>
     Type of patron:
    <INPUT TYPE="radio" NAME="patron" VALUE="youth" > Youth
    <INPUT TYPE="radio" NAME="patron" VALUE="adult" > Adult<br>
    Please enter your comments:<br>
    <TEXTAREA NAME="Comments" ROWS="10" COLS="60"> </TEXTAREA><br>
    <INPUT TYPE="submit" VALUE="Submit Feedback">
</FORM>

Here is what the form looks like in the browser:

Let's try it ...
1. Click on the Notepad window and open an existing (or new) HTML document.
2. Copy the above code into the HTML document.
3. Change the email address to your own.
3. Save your changes and interact with your form in your experimental window.

Here is what my email looked like:

The only drawback to this form is that the browser that the user is using must have mail set up so that the mailto protocol works.

Using the <select> element:

The select element can be used to provide choices and directing users to the right webpage or provide information. Here is an example that helps the user to limit a search in the HELIN catalog.

Do you want a...?

Here is the code:

<html>
<head>
  <title>Example - Using Select</title>

  <script language ="javascript">
    <!-- hide from old browsers
    function getSelect(s) { return s.options[s.selectedIndex].value }
    -->
  </script>


</head>
<body>

  <form name="collection">
  Do you want a...?<br>
    <select name="choice" size="4" OnChange="location=getSelect(choice)">
      <option value="http://library.uri.edu/search/X">Book
      <option value="http://library.uri.edu/search/X?SEARCH=(*)&searchscope=7&SORT=D">Journal or Magazine
      <option value="http://library.uri.edu/search/X?SEARCH=(*)&searchscope=8&SORT=D">Movie
      <option value="http://library.uri.edu/search/X?SEARCH=(*)&searchscope=21&SORT=D">Music
    </select>
  </form>

</body>
</html>

Note the following:

  1. Most of the code presented you have seen before.
  2. The action is provided by the event handler onChange located in the <SELECT> element.
  3. onChange is an event handler that will try to do something when one of the options is selected. What is does in this case is execute a JavaScript function called getSelect(). getSelect() is a function that takes the user to a new page whose URL is passed to the function from the <SELECT> element.
  4. getSelect() is a user-defined function (opposed to a built-in function) and must be defined within <SCRIPT> tags in the <HEAD> of the html document.

Let's try it ...
1. Click on the Notepad window and open an existing (or new) HTML document.
2. Copy the above code into the HTML document.
3. Save your changes and interact with your form in your experimental window.
4. Get daring: Add a submit button, take the event handler "onChange" out of the <select> tags, and add the "onClick" event handler to the submit button.

You have seen the very basics of how to use simple Javascript. If you would like to really learn Javascript try: http://www.webteacher.com/javatour/.


End of tutorial ...    With the skills that you have learned in this tutorial, you can now make an interactive website.