Functions
- What is a function?
- Pre-defined functions
- Scope of Variables
- Function Expressions
- Anonymous Functions
- Callback Functions
Objects
- What is an object?
- Accessing Object Properties
- Calling an Object’s Methods
- Altering Properties/Methods
Array Properties and Methods
- The length property
- Stack Methods
- Queue Methods
- Reordering Methods
- Manipulation Methods
- Location Methods
- Iterative Methods
- Working with array of objects
DOM
- The Document Object Model
- Node Relationships
- Working with the Contents of Elements
- Getting Elements by ID, Tag Name, or Class
- Adding and removing element
Built-in Objects
Using Events in JavaScript
Handling Input and Output
Ajax and JSON
The HTML DOM represents forms using the Form object. Through the Form object, you can get and set values of form fields, control the action that’s taken when a user submits a form, and change the behavior of the form.
Using Form properties
The properties of the Form object match up with the attributes of the HTML form element (see the section earlier in this chapter). They’re used for getting or setting the values of the HTML form element attributes with JavaScript. Table 12-2 lists all the properties of the Form object. DOM objects are representations of HTML pages. Their purpose is to give you access (also known as programming interface) to the different parts of the document through JavaScript. Anything within an HTML document can be accessed and changed with JavaScript by using the DOM.
You can find techniques for setting or getting the value of a form’s properties in Chapter 10. After referencing the form using one of these methods, you then access the property using dot notation or the square bracket method.To get the value of the name property of the first form in a document, you could use the following statement:
document.getElementByTagName("form")[0].name
A more common way to access a form is by assigning it an id attribute and using getElementById to select it.
The DOM provides another, more convenient method for accessing forms, the forms collection. The forms collection lets you access the forms in a document in two different ways:
- By index number: When a form element is created in the document, it is assigned an index number, starting with zero. To access the first form in the document, use document.forms[0].
- By name: You can also access forms using the value of the name attribute of the form element. For example, to get the value of the action property of a form with a name of “subscribeForm”, you would use document.forms.subscribeForm.action. Or you can use the square brackets method of accessing properties and write document.forms[“subscribeForm”].action.
Using the Form object’s methods
Let’s go through two of the form object’s methods: reset() and submit().
The reset() method
The reset() method clears any changes to the form’s fields that were made after the page loaded and resets the default values. It does the same thing as the HTML reset button, which is created by using a type=”reset” attribute with an input element, as shown in the following code:
<input type="reset" value="Clear the form">
The submit() method
The submit() method causes the form to submit its values according to the properties of the form (action, method, target, and so on). It does the same thing as the HTML submit button, which is created by using a type=”submit” attribute with an input element, as shown in the following code:
<input type="submit" value="Submit the form">
Listing 12-3 demonstrates the use of the submit() and reset() methods along with several of the form object’s properties.
Accessing form elements
JavaScript offers several different ways to access form input fields and their values. These ways are not all created equal, however, and differences of opinion exist among JavaScript programmers as to which technique is the best. The following list presents the different techniques and their benefits and drawbacks:
- Use the index number of the form and of its input fields. For example,to access the first input field in the first form, you could use document.forms[0].elements[0]. Avoid the preceding technique because it relies on the structure of the document and the order of the elements within the form not to change. As soon as someone decides that the email field should come before the first name field in the form, your whole script will break.
- Use the name of the form and the name of the input field. For example: document.myForm.firstName. This technique has the benefit of being easy to read and easy to use. It’s supported by every browser (and has been since very early in the development of the DOM).
- Use getElementById to select the form and the name of the input field to select the input. For example: document.getElementById(“myForm”).firstName. This technique requires you to assign an id attribute to the form of the element. For example, the preceding code would match an input field named firstName inside of the following form element.
<form id="myForm" action="myaction.php">
. . .
</form>Use a unique id attribute value on the field to access the field directly. For example: document.getElementById(“firstName”). Something to remember when using the preceding technique is that if you have multiple forms on your page, you need to make sure that each form field has a unique id attribute (id attribute values must be unique anyway, so it’s not really an issue).
Getting and setting form element values
The DOM gives you access to form elements’ names and values using the name and value properties.
Listing 12-4 demonstrates the getting and setting of form input fields using a simple calculator application.
Listing 12-4: A Calculator App Demonstrating the Getting and Setting of Form Input Fields:
Examples
Create a form using input fields along with submit and reset buttons.