- That’s where a lot of the cool HTML stuff lives: text fields, buttons, checkboxes, option lists, and so on. - Even so, the document object must be part of the reference to the form and its elements.. - The Form Object. - A form object can be referenced either by its position in the array of forms contained by a document or by name (if you assign a name to the form in the <FORM>. - Even if only one form appears in the document, it is a member of a one-element array, and is referenced as follows:. - Notice that the array reference uses the plural version of the word, followed by a set of square brackets containing the index number of the element (zero always being first). - But if you assign a name to the form, simply plug the form’s name into the reference:. - Almost all of the properties are the same as the attributes for forms. - All of those interactive elements that let users enter information or make selections belong to the form object. - In This Chapter What the form object represents. - Forms are created entirely from standard HTML tags in the page. - form.elements[] property. - This list is another array, with items listed according to the order in which their HTML tags appear in the source code. - However, there are times when a script needs to look through all of the elements in a form. - This would be especially true if the content of a form were to change with each loading of the page because the number of text fields changes based on the user’s browser type.. - The following code fragment shows the form.elements[] property at work in a for repeat loop that looks at every element in a form to set the contents of text fields to an empty string. - form.elements.length. - if (form.elements[i].type = “text”). - form.elements[i].value. - In the first statement, I create a variable — form — that holds a reference to the first form of the document. - I do this so that when I make many references to form elements later in the script, the length of those references will be much shorter (and marginally faster). - I can use the form variable as a shortcut to building references to items more deeply nested in the form.. - Next I start looping through the items in the elements array for the form. - Each of the four text-related HTML form elements — text, textarea, password, and hidden — is an element in the document object hierarchy. - All but the hidden object display themselves in the page, allowing users to enter information. - These objects are also used to display text information that changes in the course of using a page (although Dynamic HTML in Internet Explorer 4 also allows the scripted change of body text in a document).. - In the level 4 browsers, new event handlers fire in response to individual keystrokes as well.. - This property represents the current contents of the text element. - Content of the value property is always a string. - When a form contains only one text object, a press of the Enter key while the text object has focus automatically submits the form. - But if you are experimenting with simple forms containing only one field, the form will be submitted with a press of the Enter key. - You can, however, cancel the submission through an onSubmit= event handler in the form, as shown later in this lesson.. - In the upperMe() function, the first statement assigns the text object reference to a more convenient variable, field . - A lot goes on in the second statement of the function. - The right side of the assignment statement performs a couple of key tasks. - Working from left to right, the reference to the value property of the object ( field.value ) evaluates to whatever content is in the text field at that instant. - Therefore, the entire right side of the assignment statement evaluates to an uppercase version of the field’s content. - That’s why the uppercase string is assigned to the value property of the field.. - In the meantime, notice for a moment the onSubmit= event handler in the <FORM>. - I have used the button form element in many examples up to this point in the tutorial. - The button is one of the simplest objects to script. - Like the text object, the visual aspects of the button are governed not by HTML or scripts, but by the operating system and browser being used by the page visitor. - most useful event handler of the button object is the onClick= event handler. - A checkbox is also a simple form object, but some of the properties may not be entirely intuitive. - In Listing 9-2, the value of the checked property determines which alert box is shown to the user.. - buttons, you must assign the same name to each of the buttons in the group. - You can have multiple groups within a form, but each member of the same group must have the same name.. - The name assigned to the group becomes the name of the array. - For example, you can find out how many buttons are in a group by reading the length property of the group:. - Listing 9-3 demonstrates several aspects of the radio button object, including how to look through a group of buttons to find out which one is checked and how to use the VALUE attribute and corresponding property for meaningful work.. - Each radio button’s VALUE attribute contains the full name of one of the Three Stooges. - In that function, the first statement creates a shortcut reference to the form. - Next, a for repeat loop is set up to look through all of the buttons in the stooges radio button group. - When a button is highlighted, the break statement bails out of the for loop, leaving the value of the i loop counter at the number when the loop broke ranks.. - The alert dialog box then uses a reference to the value property of the i ’th button so that the full name can be displayed in the alert.. - form.stooges.length. - if (form.stooges[i].checked). - form.stooges[i].value . - As you will learn about form elements in later chapters of this book, the browser’s tendency to create arrays out of identically named objects of the same type (except for Internet Explorer 3) can be a benefit to scripts that work with, say, columns of fields in an HTML order form.. - The most important property of the select object itself is the selectedIndex property, accessed as follows:. - document.form[0].selectName.selectedIndex. - This value is the index number of the item that is currently selected. - The selectedIndex value is critical for letting you access properties of the selected item. - The text property is the string that appears on screen in the select object. - It is unusual for this information to be exposed as a form property, because in the HTML that generates a select object, the text is defined outside of the <OPTION>. - tag you can set a VALUE attribute, which, like the radio buttons shown earlier, lets you associate some hidden string information with each visible entry in the list.. - In the following function, the first statement creates a shortcut reference to the select object. - The selectedIndex property of the select object is then substituted for the index value of the options array of that same object:. - As soon as a user makes a new selection in the list, this event handler runs the script. - When a user makes a selection in the list, the onChange= event handler triggers a script that extracts the value property of the selected option, and assigns that value to the location object to effect the navigation. - In all of the examples so far in this lesson, when an event handler invoked a function that worked with form elements, the form or form element was explicitly referenced in the function. - At the receiving end, the function defines a parameter variable that turns that reference into a variable that the rest of the function can use:. - Therefore, statements in the script can get and set property values at will.. - This is certainly true if the function is called by a button whose function needs to access other elements of the same form. - To pass the entire form, you reference the form property of the object, still using the this keyword:. - <INPUT TYPE=”button” VALUE=”Click Here” onClick=”inspect(this.form)”>. - The function definition should then have a parameter variable ready to be assigned to the form object reference. - Again, the name of the variable is up to you.. - Listing 9-5 demonstrates passing both an individual form element and the entire form in the performance of two separate acts. - form object extract the value properties of the selected radio button and the text field.. - Notice how short the reference is to reach the value property of the song field inside the function.. - form.Beatles.length. - if (form.Beatles[i].checked). - assign values to variables for convenience var beatle = form.Beatles[i].value. - var song = form.song.value. - Get to know the usage of the this keyword in passing form and form element objects to functions. - The scripted equivalent of submitting a form is the form object’s submit() method. - All you need in the statement is a reference to the form and this method, as in. - If the form’s ACTION attribute is set to a mailTo: URL, JavaScript will not pass along the submit() method to the form. - validation of data in the form or other scripting (for example, changing the form’s action property based on user choices). - This can be done in a function invoked by the form’s onSubmit= event handler. - The return keyword must also be part of the final evaluation.. - if (form.elements[i].value. - In Navigator, the submit() method does not cause the form’s onSubmit= event handler to fire at all. - In the next lesson, you step away from HTML for a moment to look at more advanced JavaScript core language items: strings, math, and dates.. - Modify Listing 9-6 so that instead of the submission being made by a Submit button, the submission is performed from a hyperlink. - Be sure to include the form validation in the process.. - In the following HTML tag, what kind of information do you think is being passed with the event handler? Write a function that displays in an alert dialog box the information being passed.. - In the accessories form is a field named acc1 . - In the select object, the colors should be displayed as Stop, Caution, and Go.
Xem thử không khả dụng, vui lòng xem tại trang nguồn hoặc xem
Tóm tắt