javascript

Chapter 13: Scripting Forms
controls, there will be only one option selected, whereas multiselect controls may have zero or more
options selected. The same code can be used for both select types, because the restriction on the number
of selections is enforced by the browser. When an option is selected, you need to determine which value
to use. If the value attribute is not present, the text should be used instead, although a value attribute
with an empty string is completely valid. To check this, you ’ ll need to use hasAttribute() in DOM -
compliant browsers and the attribute ’ s specified property in IE.
If a < fieldset > element is in the form, it appears in the elements collection but has no type property.
So if type is undefined, no serialization is necessary. The same is true for all types of buttons and file
input fields (File input fields contain the content of the file in form submissions; however, the fields can ’ t
be mimicked, so they are typically omitted in serialization). For radio and check box controls, the
checked property is inspected and if it is set to false , the switch statement is exited. If checked is
true , then the code continues executing in the default statement, which encodes the name and value of
the field and adds it to the parts array. The last part of the function uses join() to format the string
correctly with ampersands between fields.
The serialize() function outputs the string in query string format, though it can easily be adapted to
serialize the form into another format.
Rich Text Editing
One of the most requested features for web applications was the ability to edit rich text on a web page
(also called what you see is what you get, or WYSIWYG , editing). Though no specification covers this, a de
facto standard has emerged from functionality originally introduced by IE and now supported by Opera,
Safari, Chrome, and Firefox. The basic technique is to embed an iframe containing a blank HTML file in
the page. Through the designMode property, this blank document can be made editable, at which point
you ’ re editing the HTML of the page ’ s < body > element. The designMode property has two possible
values: “ off ” (the default) and “ on ” . When set to “ on ” , an entire document becomes editable (showing
a caret), allowing you to edit text as if you were using a word processor complete with keystrokes for
making text bold, italic, and so forth.
A very simple blank HTML page is used as the source of the iframe . Here’s an example:
< html >
< head >
< title > Blank Page for Rich Text Editing < /title >
< /head >
< body >
< /body >
< /html >
This page is loaded inside an iframe as any other page would be. To allow it to be edited, you must set
designMode to “ on ” , but this can happen only after the document is fully loaded. In the containing
page, you ’ ll need to use the onload event handler to indicate the appropriate time to set designMode , as
shown in the following example:
< iframe name=”richedit” style=”height: 100px; width: 100px” src=”blank.htm” > < /iframe >
< script type=”text/javascript” >
EventUtil.addHandler(window, “load”, function(){
458