Collecting User Entry with JavaScript with The Computer Gal: Missoula, Montana

The most common way to get data from a web viewer is with a form. A form has three main parts to design and build before the programming is even started, 1) the form tag, 2) the form fields and their labels, 3) the submit button. Our first example will by-pass the need for a button.

Here is an example of a simple form in a table:

Background Information

One of the properties of the <form> tag is action="". The action is what happens after someone has clicked a Submit button. In our example, we don't have a Submit button; so, we can't call an action. Most often, information on a form goes to some program on the server for processing. This is true in server-side programming languages. In our case, we want the JavaScript to show us the results of what we had entered, right here on this page. That is client-side programming.
To understand programming, we have to understand what order things have to be done. With JavaScript, we have the problem of how to get information from the user and then put it back on the screen.
If we collect user entry from a prompt box that pops up before the page loads, the page sits there and waits until the user enters something. Then browser is able to use that information as it creates the page because it is available before the page loads. You can check this out in the Output Exercise. However, with a form, the page is already created, and it's not so simple to add something to it with JavaScript, unless the browser can rewrite the page.
We could put the information back to the screen in an Alert box or send it to another web page, which hasn't loaded yet. Another active element on your web page, however is a form element. We could have JavaScript repeat the information back into textboxes.

Exercise Instructions

Create a form in a table with four rows and two columns. If you need help building a form, click here.

To gather this information and multiply it, we will use a function. A function is a set of instructions that is part of a computer program. A function is set up like this:

<script language="JavaScript">

function multiply()
{
    var first = document.SimpleExample.First.value;
    var second = document.SimpleExample.Second.value;
    window.document.SimpleExample.Product.value = first * second;
}

</script>

Now you have the function written, but the form doesn't know that it's there. You have to tell the form to run the script. You don't want the script to run until the user has entered some numbers. There are many ways to call a function.

The form action property
The Submit button
In the individual form elements.

In this case, we will use the third method. We are ready for an answer as soon as someone has typed their second number. We can use the onChange property to have the answer pop up as soon as they leave the second textbox.

Add onChange="multiply()" to the second form element.

Notes about the code:

It is most common to place functions at the top of the code in the <head>.
Again, you have to tell the browser to call the JavaScript interpreter, but you can put many functions in the same <script></script>