JavaScript Tip of the Week for June 10, 1996: A Closer Look at Forms with JavaScript | WebReference

JavaScript Tip of the Week for June 10, 1996: A Closer Look at Forms with JavaScript

JavaScript Tip of the Weekfor June 10, 1996: A Closer Look at Forms with JavaScript

Do you really understand how forms and JavaScript work together? If you don't this tip is for you. I've never really gone over it, so this week I will show how they tie into each other. This may seem like old news, but it is something every scripter should know by heart.

First, every form that you create should be given a name:
<FORM NAME = "test_form">

This form has been given the name test_form, all objects in this form will be referred to with this name.

One important thing that you should know is that there are really two ways to give form data to JavaScript. One way is to send the form data to a function:

... and the function receiving the form would look like this:
    function func(form)

In place of object_name you would put the name of an object, such as a text input box, whose value you want to display. Now the function func() can refer to any object in the form by name. This is the method that is used in the May 20 windows tip.

Another way use the form data is by refering to the objects in the form just by name. This may seem a little confusing, but this example is done using the second method. Any function referring to this form in this way must be put in the HTML after the form, e.g. after the closing </BODY> tag. This is because all form objects must be defined before being called by the function.

Now lets create an input box and some buttons. Each of these objects should have a name too:
    <INPUT TYPE = "text" NAME = "user_name" VALUE = " type name here">
    <INPUT TYPE = "radio" NAME = "Choice" VALUE = "1"
     onClick = "user_choice = 1">Apple<BR>
    <INPUT TYPE = "radio" NAME = "Choice" VALUE = "2"
     onClick = "user_choice = 2">Microsoft<BR>
    <INPUT TYPE = "radio" NAME = "Choice" VALUE = "3"
     onClick = "user_choice = 3">Netscape<BR>
    <INPUT TYPE = "button" NAME = "Okay_Then" VALUE = "Okay Then"
     onClick = "process(this.form)">

This form clearly has five objects: a text input box named user_name, three radio style choice buttons all named user_choice, and one input button named Okay_Then. In this JavaScript enabled form, when a user clicks on one of the radi o choices, the value of variable user_choice is set to either 1, 2, or 3. But, the value inside of the user_name text box is going to be referred to by its own name, and not by another variable. Now, when the button Okay_Then is press ed this function, located after the closing </BODY> tag, is run:
function process()
    if (user_choice == 0){
        alert("Fill out the form first!");
    if (user_choice == 1){
        alert("Well " + document.test_form.user_name.value +
               ", you better hope Amelio turns Apple around.");
    if (user_choice == 2){
        alert("Definitely a solid choice " + 
                document.test_form.user_name.value + ".");
   if (user_choice == 3){
        alert("Stock goes up... Stock goes down... You\'re in for a rough ride "
                + document.test_form.user_name.value + " :-\)");

The function process checks to see what the value of user_choice is, and then in returns the appropriate alert message. But process also includes your name in its message. It does this by taking the value of the text input box, referr ed to as document.test_form.user_name.value. As you can see, each part of the statement refers to a part of the form. It essentialty tells the function, "Look in this document, in test_form at the object user_name and give me i ts value." Then it just adds this value to the message string. Now try out this form for real. After filling in your name, just choose which company you would like to invest in, then press the button and read my advice (which is worth nothing).


Now you can go off and make forms and games that will make people proud to say, "I know JavaScript". Source