JavaScript creates a Form object for each form contained within an HTML document. These Form objects are stored in the document.forms[] array, and can be accessed via the array index number or the form's name.
Each Form object contains an elements[] array that stores a reference to each input element (radio button, checkbox, textarea, etc.) within a form. Like any array, the elements[] array includes a length property that references the number of elements in a form. You can refer to input elements using this array, or you can refer to specific elements by name:
document.formName.elementName
If multiple elements share the same name, as is the case with radio buttons and checkboxes, each element is stored as part of a named array. For instance, in a form named formOne containing a set of radio buttons named "age", you can refer to each individual radio button through its index number:
document.formOne.age[0]
document.formOne.age[1]
Every input element, with the exception of the Select object, has a value property that corresponds to the HTML value attribute. You can both read and write an input value by referencing this property:
document.formOne.text1.value = "new text input value";
var textVal = document.formOne.textarea1.value;
For radio buttons and checkboxes, the value property only stores the value to be transmitted to the server, and does not indicate whether or not an element is selected. To verify this, use the checked property, which has a value of true (if selected) or false (if not selected).
The Select object does not contain a value property; rather, each individual option in an HTML <select> element has its own value property. The Select object does contain a selectedIndex property that references the index number of the selected option. If no option is selected, the value of this property is -1.
document.formOne.select1.selectedIndex;
document.formOne.select1.options[i].value;
The following validation examples will launch in a separate browser window. To view the source, select "View" then "View Source" or equivalent.
The built-in Date object allows you to manipulate date and time values. Use the new Date() constructor to create Date objects. Without any arguments, the new Date() constructor creates a Date object set to the current time and date. However, you can set a custom date by passing arguments to the constructor:
new Date(ms)
new Date("Wed, 6 June 2001 20:00:00")
new Date(year, month, day, hours, minutes, seconds, ms)
Note that when passing arguments to the Date constructor, you must specify the month using its index, where January = 0, February =1 and so on. The year and month arguments are required, but the others are optional and may be omitted.
- getDate() - returns the date (0-31) of a Date object.
- getDay() - returns the day (0-6) of a Date object.
- getFullYear() - returns the 4 digit year.
- getHours() - returns the hour (0-23).
- getMilliseconds() - returns milliseconds of a Date object.
- getMinutes() - returns the minutes (0-59).
- getMonth() - returns the month (0-11).
- getSeconds() - returns the seconds (0-59).
- getTime() - converts a date and time to a millisecond representation. see Date.parse()
- getTimezoneOffset() - returns the difference between local time and GMT in minutes.
- setDate() - sets the date (0-31) of a Date object.
- setFullYear() - sets the 4 digit year.
- setHours() - sets the hour (0-23).
- setMilliseconds() - sets the milliseconds field.
- setMinutes() - sets the minutes (0-59).
- setMonth() - set the month field (0-11).
- setSeconds() - sets the seconds(0-59).
- toString() - converts a date to a string.
- toUTCString() - converts a date to a string, expressed in universal time.
- Date.parse() - converts a date and time to a millisecond representation. Always used with the global Date object rather than a custom Date object.
A cookie is a small piece of data that is stored by the Web browser and linked to a specific Web site or Web page. Cookies allow browsers to maintain state; that is, they allow browsers to "remember" certain pieces of data for a specified amount of time.
You can write new cookie data and retrieve data that you have set using JavaScript's document.cookie property. This property contains a string of name=value pairs separated by semi-colons. For instance, if you have set multiple cookies, each with one name=value pair, reading the document.cookie property produces a string of all of these cookies values:
login=Carrie; zip=94122
Note that when reading cookies, you only have access to cookies set from your own server or domain name.
To set a cookie with a name=value property, use the document.cookie property:
document.cookie="login=Scully";
document.cookie="login=" + username;
In addition to name=value pairs, cookies can contain 4 optional attributes: expires, path, domain, and secure. If you do not set the expires attribute to a specific date, the cookie expires when the user ends the browsing session. When setting an expiration date, the date should be formatted using the Date.toGMTString() method.
var myExpire = new Date();
myExpire.setMonth(myExpire.getMonth() + 6);
myExpire.toGMTString();
document.cookie="login=" + username + "; expires=" + myExpire;
By default, cookies are accessible to the directory in which they were set and any subdirectories. To make a cookie accessible to other directories on the same server, use the path attribute. Setting the path attribute to "/" makes the cookie accessible to all directories on the server.
document.cookie="login=" + username + "; expires=" + myExpire + "; path=/";
Similarly, if you want to have a cookie be accessible to multiple subdomains, use the domain attribute.
As noted above, reading the value for the document.cookie property returns a string of all the name=value pairs associated with a particular page or site. In order to retrieve a specific piece of data from this string, you must search for the name=value pair, then extract the value using methods associated with the String object.
- String.indexOf(substring)
This method searches a string for an occurrence of a substring that you specify. The value returned is a number that indicates the position of the first character of the substring. If the substring is not located, the return value is -1.
- String.indexOf(substring, start)
Searches a string for a substring, but rather than searching from the beginning of the string, it searches from the start position you indicate. The value of this argument must be a number between 0 and the total number of characters in the string.
- String.substring(start, end)
Returns a portion of a larger string, defined by the position of the first character (start) and the position of the last character (end). The substring includes the start character but not the end character.
var initialPosition = document.cookie.indexOf("login=");
if (initialPosition != -1) {
start = initialPosition + 6;
end = document.cookie.indexOf(";",start)
if (end == -1) end = document.cookie.length;
var userLogin = document.cookie.substring(start,end);
}
|