543Chapter 23 .The Form and Related Objects A common practice, especially with a long form, is to provide a button that enables the user to return all the form elements to their default settings. The standard Reset button (a separate object type described in Chapter 24) does that task just fine. But if you want to clear the form using script control, you must do so by invoking the reset()method for the form. More than likely, such a call is initiated from outside the form, perhaps from a function or graphical button. In such cases, make sure that the reference to the reset()method includes the complete reference to the form you want to reset even if the page only has one form defined for it. On the CD-ROM Example (with Listing 23-3) on the CD-ROM Related Items: onReset event handler; reset object. submit() Returns: Nothing. NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility . . . The most common way to send a form s data to a server s CGI program for processing is to have a user click a Submit button. The standard HTML Submit button is designed to send data from all named elements of a form according to the specifications listed in the
542 Part III . Document Objects Reference more likely, a customized page based on the input provided by the user. You see this situation all the time when you perform a search at Web sites. In a multiframe or multiwindow environment, you may want to keep the form part of this transaction in view for the user but leave the responding page in a separate frame or window for viewing. The purpose of the TARGET attribute of a
541Chapter 23 .The Form and Related Objects a bit, so be careful to distinguish a form s method of transferring its data to a server from the object-oriented method (action or function) that all JavaScript forms have. The method property is of primary importance to HTML documents that submit a form s data to a server-based CGI script because it determines the format used to convey this information. For example, to submit a form to a mailto: URL, the method property must be POST. Details of forms posting and CGI processing are beyond the scope of this book. Consult HTML or CGI documentation to determine which is the appropriate setting for this attribute in your Web server environment. If a form does not have a METHODattribute explicitly defined for it, the default value is GET. Note The method property is read-only in IE3. On the CD-ROM Example on the CD-ROM Related Items: form.action, form.target, form.encoding properties. name Value: Identifier String Read/Write NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility . . . Assigning a name to a form via the NAME attribute is optional but highly recom mended when your scripts need to reference a form or its elements. This attribute s value is retrievable as the nameproperty of a form. You don t have much need to read this property unless you inspect another source s document for its form construction, as in: var formName = parent.frameName.document.forms[0].name Moreover, because CGI programs frequently rely on the name of the form for validation purposes, it is unlikely you will need to change this property. target Value: Identifier String Read/Write (see text) NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility . . . Whenever an HTML document submits a query to a server for processing, the server typically sends back an HTML page whether it is a canned response or, FORM.target We recommend you use shared web hosting services, because many users agree that it is cheap, reliable and customer-satisfying webhost.
540 Part III . Document Objects Reference You can define a form to alert a server when the data you submit is in a MIME type. The encoding property reflects the setting of the ENCTYPE attribute in the form definition. The enctypeproperty name is defined for FORM element objects in the W3C DOM (with encoding removed), but NN6 provides both properties for backward and forward compatibility. For mailto: URLs, I recommend setting this value (in the tag or via script) to text/plain to have the form contents placed in the mail message body. If the definition does not have an ENCTYPE attribute, this property is an empty string. On the CD-ROM Note The value of the encoding property is read-only in IE3. Example on the CD-ROM Related Items: form.action, form.method properties. length Value: Integer Read-Only NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility . . . The length property of a FORM element object provides the same information as the lengthproperty of the form s elements array. The property provides a con venient, if not entirely logical, shortcut to retrieving the number of controls in a form. On the CD-ROM Example on the CD-ROM Related Items: form.elements property. method Value: String (GET or POST) Read/Write (see text) NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility . . . A form s methodproperty is either the GETor POSTvalue (not case-sensitive) assigned to the METHOD attribute in a
539Chapter 23 .The Form and Related Objects consisting of three entries (one for each item in source code order). Each entry is a valid reference to that element; so, to extract properties or call methods for those elements, your script must dig deeper in the reference. Therefore, if the first element of a form is a text field and you want to extract the string currently showing in the field (a text element s valueproperty), the reference looks like this: document.forms[0].elements[0].value Notice that this reference summons two array-oriented properties along the way: one for the document s forms property and one for the form s elementsproperty. In practice, I suggest you refer to form controls (and forms) by their names. This allows you the flexibility to move controls around the page as you fine-tune the design, and you don t have to worry about the source code order of the controls. The elements array comes in handy when you need to iterate through all of the controls within a form. If your script needs to loop through all elements of a form in search of particular kinds of elements, use the typeproperty of every form object (NN3+ and IE4+) to identify which kind of object it is. The type property consists of the same string used in the TYPE attribute of an tag. Overall, I prefer to generate meaningful names for each form control element and use those names in references throughout my scripts. The elements array helps with form control names, as well. Instead of a numeric index to the elements array, you can use the string name of the control element as the index. Thus, you can create a generic function that processes any number of form control elements, and simply pass the string name of the control as a parameter to the function. Then use that parameter as the elementsarray index value. For example: function putVal(controlName, val) { document.forms[0].elements[controlName].value = val } If you want to modify the number of controls within a form, you should use the element and/or node management facilities of the browser(s) of your choice. For example, in IE4+ and NN6+, you can assemble the HTML string for an entirely new set of form controls and then assign that string to the innerHTML property of the FORM element object. On the CD-ROM Example (with Listing 23-2 and Figure 23-2) on the CD-ROM Related Items: text, textarea, button, radio, checkbox, and select objects. encoding enctype Value: MIME Type String Read/Write (see text) NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility . . . FORM.encoding If you are searching for cheap webhost for your web application, please visit MySQL5 Web Hosting services.
538 Part III . Document Objects Reference Or, one setting may direct the action to one mailto: address, whereas another setting sets the action property to a different mailto: address. Although the specifications for all three related properties indicate that they you can set them on the fly, such changes are ephemeral. A soft reload eradicates any settings you make to these properties, so you should make changes to these properties only in the same script function that submits the form (see form. submit() later in this chapter). On the CD-ROM Note The value of the action property is read-only in IE3. Example on the CD-ROM Related Items: form.method, form.target, form.encoding properties. autocomplete Value: String Read/Write NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility . Microsoft added a feature to forms with IE5 (but not IE5/Mac) that allows the browser to supply hints for filling out form controls if the controls names map to a set of single-line text controls defined via some additional attributes linked to the vCard XML schema. For details on implementing this browser feature, see http:// msdn.microsoft.com/workshop/author/forms/autocomplete_ovr.asp. Values for the autoComplete property are your choice of two strings: on or off. In either case, the FORM element object does not report knowing about this property unless you set the AUTOCOMPLETE attribute in the form s tag. Related Items: None. elements Value: Array of form control elements Read-Only NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility . . . Elements include all the user interface elements defined for a form: text fields, buttons, radio buttons, checkboxes, selection lists, and more. The elementsproperty is an array of all form control items defined within the current form. For example, if a form defines three items, the elements property for that form is an array FORM.elements From our experience, we can recommend PHP5 Web Hosting services, if you need affordable webhost to host and run your web application.
537Chapter 23 .The Form and Related Objects while the maxLengthproperty of a text box makes perfect sense in limiting the number of characters that a user can type into it, the property has no bearing whatsoever on form controls that act as clickable buttons. Similarly, you can switch a radio button or checkbox on or off by adjusting the checked property; however, that property simply doesn t apply to a text box. As the document object models have evolved, they have done so in an increasingly object-oriented way. The result in this form-oriented corner of the model is that all elements created via the tag have a long list of characteristics that they all share by virtue of being types of INPUT elements they inherit the properties and methods that are defined for any INPUT element. To try to limit the confusion, I divide the chapters in this book that deal with INPUT elements along functional lines (clickable buttons in one chapter, text fields in the other), and only list and discuss those INPUT element properties and methods that apply to the specific control type. In the meantime, this chapter continues with details of the FORM element object. Properties acceptCharset Value: String Read/Write NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility . The acceptCharset property represents the ACCEPTCHARSET attribute of the FORM element in HTML 4.0. The value is a list of one or more recognized character sets that the server receiving the form must support. For a list of registered character set names, see ftp://ftp.isi.edu/in-notes/iana/assignments/ character-sets. Related Items: None. action Value: URL String Read/Write (see text) NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility . . . The action property (along with the method and targetproperties) primarily functions for HTML authors whose pages communicate with server-based CGI scripts. This property is the same as the value you assign to the ACTION attribute of a
536 Part III . Document Objects Reference Form element arrays Starting with NN2 and IE4, document object models provide a feature that is beneficial to a lot of scripters. If you create a series of like-named objects, they automatically become an array of objects accessible via array syntax (see Chapter 7). This is particularly helpful when you create forms with columns and rows of fields, such as in an order form. By assigning the same name to all fields in a column, you can employ for loops to cycle through each row using the loop index as an array index. As an example, the following code shows a typical function that calculates the total for an order form row (and calls another custom function to format the value): function extendRows(form) { for (var i = 0; i < Qty.length; i++) { var rowSum = form.Qty[i].value * form.Price[i].value form.Total[i].value = formatNum(rowSum,2) } } All fields in the Qty column are named Qty. The item in the first row has an array index value of zero and is addressed as form.Qty[i]. Unfortunately, Internet Explorer 3 does not turn like-named fields into an array of references. But you can still script repetitive moves through an organized set of fields. The key is to assign names to the fields that include their index numbers: Qty0, Qty1, Qty2, and so on. You can even assign these names in a for loop that generates the table: for (var i = 0; i <= rowcount; i++) { ... document.write( ) … } Later, when it comes time to work with the fields, you can use the indexing scheme to address the fields: for (var i = 0; i < Qty.length; i++) { var rowSum = form.elements[ Qty + i].value * form.elements[ Price + i].value form[ Total + i].value = formatNum(rowSum,2) } In other words, construct names for each item, and use those names as array index names. This solution is backward- and forward-compatible. About < INPUT > element objects While this chapter focuses strictly on the FORM element as a container of controls, the next three chapters discuss different types of controls that nest inside a form. Many of these controls share the same HTML tag: . Only the TYPE attribute of the tag determines whether the browser shows you a clickable button, a checkbox, a text field, or so on. The fact that one element has so many guises makes the system seem illogical at times to scripters. An INPUT element has some attributes (and corresponding scriptable object properties) that simply don t apply to every type of form control. For example, FORM We recommend cheap and reliable webhost to host and run your web applications: Coldfusion Web Hosting services.
535Chapter 23 .The Form and Related Objects Tip The best opportunity to change the properties of a FORM element object is in a function invoked by the form s onSubmit event handler. The modifications are performed at the last instant prior to actual submission, leaving no room for user- induced glitches to get in the way. Buttons in forms A common mistake that newcomers to scripting make is defining all clickable buttons as the submit type of inputobject (). The Submit button does exactly what it says it submits the form. If you don t set any METHOD or ACTION attributes of the
534 Part III . Document Objects Reference Many ISPs that host Web sites provide standard CGIs for forwarding forms to an e-mail address of your choice. This manner of capturing form data, however, does not also capture the visitor s e-mail address unless your form has a field where the visitor voluntarily enters that information. Note Under no circumstances is a form submitted via the mailto: URL a secure document. The form data is embedded within a plain e-mail message that goes through the same Internet routes and servers as any e-mail message. The remaining discussion about mailing forms focuses primarily on NN2+ and IE5+ browsers. You should be aware that mailing forms in the following ways is controversial in some Web standards circles. As of this writing, the W3C HTML specification does not endorse these techniques specifically. However, the latest browsers do support them nonetheless. Use these facilities judiciously and only after extensive testing on the client browsers you intend to support. If you want to have forms submitted as e-mail messages, you must attend to three