Northcentral Technical College Introduction To Programming
10-152-310
Introduction to Programming with JavaScript NTC 10-152-310

Learning Plan 6 Beginning to Use Forms with JavaScript

# Beginning to Use Forms with JavaScript

#### File: /Learning Plan 6/usingForms.html

- No more prompt?

### No More `prompt()`!

- We're going to start using forms instead of the `prompt()` dialog box. We want to start doing more HTML based programming.
- The `prompt()` function is even being downplayed by many people. Even Internet Explorer 7 disables it by default.
- Here's a little example application to demonstrate the whole process.

First Name:
Last Name:
Age:

### Let's look at the HTML first:

- Line 1: The `form` tag.
  - It should have an `id` attribute.
  - The `action` attribute value is # which means that the form will not be submitted to the server.
  - The `onsubmit` attribute is what makes JavaScript handle the form. The `return` statement determines if the page will refresh or not.
  - The `greetUser();` function is in the attached JavaScript file and is the function that will be run when the Enter button is pressed.
- Lines 2-3: A label tag styled with CSS.
- Lines 4-5: Here's an input tag.
  - The tag should have an `id` attribute and a `name` attribute.
  - The `<br />` tag with `clear:left;` lets the next element start on the next line.
- Lines 6-12: More labels, inputs, and br tags for the form fields.
- Lines 13-17: Here's the `submit` button. When the button is clicked, the form will not be submitted normally--instead the function `greetUser()` will be called (and nothing is sent to any server.) [Remember from the HTML course that this onsubmit event hander is placed not with the input tag for this element, but rather up on the opening form element tag. See line 1 of the program above.]
- Lines 18-23: This is a button that says Reset on it. But note that this is a type=" button", not a type="reset". It needs a script associated with it in order for anything to happen. And it does have a script associated with it. When this button is clicked the function `resetGreetingForm()` will be run.

### The Key Parts of the HTML

- In the `<form>` tag this attribute shuts off the normal submission of the form. We don't want the browser to try to contact the server. We want our JavaScript code to be called instead.
- This attribute is the heart of the whole form handling. We need the form to not cause a page refresh. The `return` statement gets the value returned by the function and returns it to the JavaScript engine. The function needs to send `false` if it does not want the page to refresh or `true` if the page should refresh. The word `onsubmit` is an Event Handler in JavaScript and is what causes the function to be called when a normal submit is pressed.
- The input tags need to have `id` attributes set with a unique value. Then `name` attribute is also required if the form will be submitted normally by the JavaScript function. In this example the form fields will be access using the name attribute.
- The `submit` button is just a normal HTML submit button. JavaScript will take over when this button is clicked.
- The `reset` button is not a real reset button. It is a generic button that will call the function `resetGreetingForm()` when it is pressed. This way, our JavaScript code can reset the form and the output tags.

### The JavaScript code

- Here's the main function that will handle the submit button click.
- Lines 1-7: Start the function and declare variables.
- Lines 10-11: Get the output element and the form. You have to use exactly the same ids that you put in the HTML. This is one of very few places where I recommend a `copy and paste`.
- Lines 14-16: We are getting the individual values from the entered text fields.
  - The word `form` is our variable we declared earlier.
  - The words `firstName`, `lastName`, and `age` are the `name` attributes on the `input` tags. These also have to be exactly the same, including case.
  - The word `value` is a JavaScript keyword that returns what was entered by the user in the text box.
- Lines 19-20: Using the `innerHTML` property to set the contents of the output `div` tag. In this case we are adding an `<h4>` tag.
- Line 22: Set the focus of the page to the `firstName` field.
- Line 23: Select the contents of the `firstName` field.
- Line 24: Return `false` to the `onsubmit` so that the browser won't refresh the page.

### The Key Parts of the JavaScript

- It's essential to have the argument for the `getElementById()` call be the same, including case, in this following line. Many students lose untold hours of frustrating time by having a small spelling mistake here.
- What if you typed this?
- That kind of mistake is sometimes very hard to see. You often need someone else to look at your code to see it. Again, I recommend that you copy and paste the id values from the HTML page to the JavaScript file.
- The following syntax might be new to you. It is a very handy shortcut for getting access to the values from the text fields on the form. There are other methods, too, but this is easy and appears clear.
- The "first" `firstName` is just a variable that we declared earlier.

    firstName = form.firstName.value;

- The word `form` is the variable where we stored the form retrieved by the getElementById() function.

    firstName = form.firstName.value;

- The "second" `firstName` is the exact value of the `name` attribute off the `input` tag. Here's another spot where you should copy and paste.

    firstName = form.firstName.value;

- The JavaScript keyword `value` will return the string that was entered by the user into the `input` tag.

    firstName = form.firstName.value;

- Finally, the value `false` is returned to the calling function so that the browser won't refresh the page and wipe out our output.

### A Picture is Worth...

### A Lab is "called" for here, I think.

- 6.1 Lab 6
  - 6.1 Assignment 3