Forms, Events and Dialog Boxes
(Lesson 6)

This lesson introduces you to the use of Forms, Events and Dialog boxes in JavaScript. As you will find out, Forms are constantly used in JavaScript. Carefully read the paragraph of Events and work though the related assignment to learn about Events, a part of JavaScript that you will use often.


Forms

Forms are not of much use when your pages are done strictly with HTML and you don't have access to CGI. However, Javascript allows you to make effective use of forms to create clocks, scrolling messages, drop down menus, and mini applications like our Lab that we us in this class. You create a form using the <FORM>  </FORM> tags. Different variations of <INPUT> tag are then used to create the form elements we will be using in this class. Two variations of the <INPUT> tag are the text input box and the button. We will learn about some of the others later. Here is the HTML code used to create a typical form that contains a text input box and button.

 <FORM name="myform">
 <INPUT type="text"  name="myTextInput"
   size=30 maxlength=30 
   value="this is a 1 line text box">
 <P>
 <INPUT type="button" name="myButton" 
  value="A Button">
 </FORM>

This is how it renders:

Including the name parameter in the <FORM> tag is important if you want to refer to the form object and its individual parts. We will soon see some examples of this.

Alert Dialog Box

Click here to see an example of the Alert Dialog box.

The alert dialog box is a method of the window object.  We will begin our discussion of objects in the next lesson.  The syntax for the alert box is very simple.  This is all there is to it.

 alert(message)

The single parameter, message, of the alert box is displayed in a pop-up modal window.  A modal window is one that is displayed on top of all other windows until it is closed.  A single 'OK' button is provided to close the alert box.

Many novice JavaScript programmers like to use the alert box to welcome visitors to the first page of their site. I do not recommend this because it can become very annoying since it will pop up every time your visitor enters the page, even after following a link to one of your other pages and then returning. So, that's the reason for the message that appeared in the pop-up when you clicked on the link above.

The alert box is an excellent debugging tool that you can use when you are having a problem with getting your code to work. So far our code is simple and not really needing such a tool. But as your scripts get more complex, you will welcome a method of trouble shooting your code to see how the variables are set or what sequence the code is going though.  So remember the alert box and learn how to use it in such situations.  It is invaluable.

Lets look at the code that was used to call the alert box in our demonstration above.

Click <A href='JavaScript:alert("Use this wisely!")'>here</A> to see an example of the Alert Dialog box.

Look at the value that the href attribute is set equal to. This example demonstrates that you can use the special technique shown to cause a function, or object method in this case, to be called instead on navigating to another URL.

JavaScript:functionName() is a valid location parameter for the href attribute of the anchor tag. Also note that our example contains both single and double quotes as we talked about earlier.

I use the above technique with a message "not working yet" when I want to put a link from a page I am developing to another page that I plan to develop later. Doing this prevents me from having a dead link and also reminds me that I need to develop the page.


Events in JavaScript

Here is another example using the alert box:

and the code:

<FORM NAME="demo1">
<INPUT TYPE="button" NAME="alertDemo" VALUE="Alert Demo"
onClick='alert("Another way to call JavaScript.")'>
</FORM>

This is a example of using an event handler to call a JavaScript function. Events are actions that take place in a document and are often caused by something that the user did. The event handler is this case is onClick. Some of the more popular event handlers that your might use are

  • onLoad, onUnload, and onBlur in the Window Object
  • onClick, onMouseOver and onMouseOut in the Link Object
You place the Window Object event handlers in the body tag and the Link Object event handlers in the Anchor tag. You will learn about the event handlers in other objects as you gain more experience with JavaScript.


Confirm and Prompt Dialog Boxes

Two other Dialog boxes are available in the window object. I will give you a demo and display the code used for each below. I don't see a lot of practical use for either of these except for demo's. You will soon have enough knowledge to be able to do something similar using JavaScript that can be customized for your site.

<FORM NAME="demo2">
<INPUT TYPE="button" NAME="confirmDemo"
VALUE="Demo of confirm dialog box"
onClick='confirm("Can you think of a use for this?")'>
</FORM>

<FORM NAME="demo3">
<INPUT TYPE="button" NAME="promptDemo"
VALUE="Demo of prompt dialog box"
onClick='prompt("Enter some information")'>
</FORM>

The confirm dialog box returns a Boolean value, true, if OK is pressed and false if Cancel is pressed. You can use this in an if statement to perform some action if you want to. I think the fact that the buttons are labeled 'OK' and 'Cancel' also makes this awkward to use.

The prompt box returns the value of the text in the field if the OK button is clicked. It returns null if the cancel button is clicked.



Assignment

  1. Spend some time learning about forms if you are not already familiar with them. The "Sizzling HTML Jalfrezi" link in our Library is a good place to start. Don't be too concerned about the "Submit" button. I don't think you will use it.

  2. Make a page that contains three links. Use these three links to demonstrate the three event handlers (onClick, onMouseOver, and onMouseOut) of the Link object. Use the alert box for this exercise similar to the way we did for the demo of the onClick event handler for the button on a form. Be aware that this problem is more challenging that you think at first because you need to have something for the href property of each of these links. I normally place a dummy function in the HEAD section and call that from the href property of the link. Here is the function that I use.
      function doNothing(){
        }
    
    Solution   Source



[ Top of Page  |  Contents ]