ptg 11.4 JavaScript and the form Object 365 11.4.5 The this Keyword The this keyword is especially helpful when dealing with forms. We used the this word when working with objects as a reference to the current object. For forms containing multiple objects, such as checkboxes, radio buttons, and textboxes, it is easier to refer to the object with the this keyword than by using its full name when calling a function. When using an event handler, the this keyword always refers to the object that trig- gered the event. If the event is triggered from within the <form> tag, this refers to the current form, but if it is triggered by an element within the form, such as an input device, then it references that element. Each element has a form property that references the form in which it was created. In the following segment of an HTML document, note that when the onClick event handler is triggered within the first button input type, the form property is used to reference the form itself, whereas in the second button, the this key- word refers to the current button. Figure 11.21 The user clicked the Reset Form button. The dialog box confirms the choice before the input boxes are reset to their default values. FORMAT <form> < The JavaScript form object <input type="button" < This a JavaScript element value="Print Form Stuff" onClick="display_formval(this.form);" /> < this keyword references the form object by using the element’s form property <input type="button" value="Print Button Stuff" onClick="display_buttonval(this);" /> < this keyword references the current object, the button </form> From the Library of WoweBook.Com ptg 366 Chapter 11 • Working with Forms and Input Devices EXAMPLE 11.13 <html> <head><title>An HTML form and the "this" keyword and Event Handler</title> <script type="text/javascript"> 1 function checkForm(form1){ 2 if(form1.your_name.value == ""){ // Check for an empty string 3 alert("Please type in your name"); return(false); } else{ return(true); } } </script> </head> <body><b> 4 <form method="post" action="http://localhost/cgi-bin/check.pl" onSubmit="return checkForm(this)"><p> <big><p> Type your name here: 5 <input type="text" name="your_name" size="50" /> <br /><br /> 6 <input type="submit" value="Submit" /> <input type="reset" value="Clear" /> </form> </body> </html> EXPLANATION 1 The function called checkForm() is assigned to the onSubmit event. When the user clicks the submit button, the event is triggered and as a result, the checkForm function is called. The this argument is a reference to this form. In checkForm, the parameter is called form1, called on line 4 with the this keyword, which is a refer- ence to the form. 2 When following the DOM hierarchy, form1 refers to document.forms[0]. The text field was named your_name on line 5. Now it can be referenced as docu- ment.form1.your_name. The value property refers whatever was entered in the text field. We are checking to see if the text field is the empty string, in which case we will alert the user. 3 The user is alerted to enter his or her name in the text field. 4 The onSubmit handler sends one argument, this, to the function checkForm(). The keyword this is a shorthand name for the current object; in this example the cur- rent object is a form, document.forms[0]. From the Library of WoweBook.Com ptg 11.4 JavaScript and the form Object 367 Using the button Input Type Rather than submit. As shown in the previous examples, before the browser sends data to the server, an onSubmit or onClick event han- dler is triggered when the user clicks the submit button or presses the Enter key. But what if you don’t want the form to go off to the server? Then you will have to reject the submission or the browser will reset all the field values to their defaults. If the form is not going to submit data to a server, the button input type can be used instead of the submit button. The button object has no default behavior and is used as a triggering device so that when the user clicks the button, it causes something to happen. The onClick event handler is commonly used with buttons and is set as an attribute of the button input type. The onClick event handler is triggered when the user clicks the button associated with it. 5 The HTML input type is a text field named your_name, which will display up to 50 characters. 6 The HTML input type is a submit button. When the user clicks this button, the onSubmit handler in line 4 is triggered. If the return value from the function check_Form is true, the form will be submitted to the server, located at the URL shown in the action attribute of the form named info. EXAMPLE 11.14 <html> <head><title>button input type</title> <script type="text/javascript"> 1 function greetme(){ alert("Why did you click me like that? "); } </script> </head> <body> 2 <form name="form1"> <! event handler for a button is an attribute for its input type > 3 <input type="button" value="Click me!" 4 onClick="greetme()" /> </form> </body> </html> EXPLANATION 1 This function called greetme() is called when the user clicks the button device. 2 A form called form1 is started. Continues EXPLANATION ( CONTINUED) From the Library of WoweBook.Com ptg 368 Chapter 11 • Working with Forms and Input Devices 11.4.6 The submit() and reset() Methods In addition to event handlers (fully discussed in Chapter 13), JavaScript provides two methods for the forms object, the submit() and the reset() methods. These methods emu- late the event handlers of the same name: The submit() method submits the form just as though the user had clicked the submit button, and the reset() method resets the form elements to their defaults just as if the user had clicked the reset button. Neither of these methods trigger the onSubmit or onReset event handlers. (Note that the methods must be spelled with lowercase letters.) These methods allow you to ask for user confirma- tion, check input data, and so on, before sending the form to the server for processing. 3 The input type is a simple graphical button containing the text “Click me!” 4 When the user clicks the button, the onClick event handler is triggered and the function called greetme() is called. It will send an alert dialog box to the screen, as shown in Figure 11.22. Figure 11.22 Using a button to call a function. EXAMPLE 11.15 <html> <head><title>An HTML Form</title></head> <body> <b> 1 <form name=myForm action="http://localhost/cgi-bin/environ.pl" method="post"> <p> <fieldset><legend><big> All About You</legend> <p><font size=3 color="blue"> Type your name here: 2 <input type="text" name="namestring" size="50" /> EXPLANATION ( CONTINUED) From the Library of WoweBook.Com ptg 11.4 JavaScript and the form Object 369 <p> Talk about yourself here:<br /> 3 <textarea name="comments" align="left" rows="5" cols="50">I was born </textarea> <p> <b>Choose a work place:</b><br /> 4 <input type="checkbox" name="place" value="LA" />Los Angeles <br /> <input type="checkbox" name="place" value="SJ" />San Jose <br /> <input type="checkbox" name="place" value="SF" checked />San Francisco <p></fieldset> </form> <p> 5 <a href="#" onClick="JavaScript: myForm.submit();" /> Click here to submit this form</a> <p> 6 <a href="#" onClick="JavaScript: myForm.reset();" /> Click here to reset this form</a> </body> </html> EXPLANATION 1 The form called myForm starts here. When the form is submitted, it will go to the address assigned to the action attribute, and the method—how the form is sent— is the post method. 2 The text field input type will accept a line of text from the user. 3 The text area box will accept up to 5 rows of text from the user. 4 The user can select any of the checkboxes. The default, San Francisco, is checked. 5 The link has been deactivated with the #. When the user clicks the link, the on- Click event will be triggered and cause the JavaScript submit() method to be in- voked (see Figure 11.23). The form data will be sent to the URL assigned to the action attribute of the form. The URL is a CGI program residing on the local serv- er. Note that there is no need for the submit button here. 6 The link has been deactivated with the #. When the user clicks the link, the on- Click event will be triggered and cause the JavaScript reset() method to be in- voked. The input boxes will all be cleared and set back to their default values. EXAMPLE 11.15 (CONTINUED) From the Library of WoweBook.Com ptg 370 Chapter 11 • Working with Forms and Input Devices Displaying a Form’s Content in a Popup Window. After filling out a form, you might want to display the form content for confirmation before submitting it to a server. This can be done by creating another window, called a popup, and outputting the form data dynamically into that window. Example 11.16 uses JavaScript to open a new win- dow to display the gathered form data from another file. Figure 11.23 When the user clicks one of the links, either the submit() or the reset() method will be invoked. EXAMPLE 11.16 <html> <head><title>Display Form Input</title> <script type="text/javascript"> 1 function showForm(myform) { 2 NewWin=window.open('','','width=300,height=200'); 3 name_input="<b>Your name: " + myform.user_name.value + "</b><br />"; 4 NewWin.document.write(name_input); phone_input="<b>Your phone: " + myform.user_phone.value + "</b><br />"; 5 NewWin.document.write(phone_input); } 6 function close_window(){ NewWin.window.close(); } </script> </head> From the Library of WoweBook.Com ptg 11.4 JavaScript and the form Object 371 <body><hr><h3> Display form data in a little window</h2><p> 7 <form name="formtest"> 8 Please enter your name: <br /> <input type="text" size="50" name="user_name" /> <p> Please enter your phone: <br /> <input type="text" size="30" name="user_phone" /> </p><p> 9 <input type="button" value="show form data" onClick="showForm(this.form)"; /> </form> </p> <big> 10 <a href="JavaScript:void(0)" onClick="close_window()"> Click here to close little window</a> </big> </body> </html> EXPLANATION 1 A JavaScript function called showForm() is defined. Its only parameter is a refer- ence to the name of the form; in this example, myform. 2 A new window object is created with the window’s open() method. 3 The variable called name_input is assigned a string that will contain HTML tags and the value that was assigned to the form’s text field. 4 The document of the new window will display the string value assigned to the variable name_input in line 3. 5 The document of the new window will display the string value assigned to phone_input. 6 This function will close the new window. 7 The HTML form called formtest starts here. 8 The input type for this form consists of two text fields that will be used to obtain the name and the phone of the user. 9 When the button input device is clicked, the onClick handler will be invoked. This is when you will see the new little window appear on the screen with all the form data. 10 The JavaScript void(0) operator has the effect of deactivating the link so that it will not try to go to some URL when clicked (like the # in Example 11.17). Instead, event handler close_window() will be invoked and the little window that was opened to display the form data will be closed. See Figure 11.24. EXAMPLE 11.16 (CONTINUED) From the Library of WoweBook.Com ptg 372 Chapter 11 • Working with Forms and Input Devices 11.5 Programming Input Devices (Controls) With JavaScript, you can alter the contents of the form’s input devices dynamically (also called controls or elements). Because each input device is an object, each has properties and methods, and can be manipulated like any other JavaScript object (i.e., it can be assigned to, changed, deleted, etc.). You can program checkboxes, assign values to text areas and textboxes, change the value in fields, add choices to drop-down menus, verify password entries, and do all of this on the fly. The following section shows you how to program input devices. Figure 11.24 Form data is displayed in another window, called a popup window. From the Library of WoweBook.Com . are reset to their default values. FORMAT <form> < The JavaScript form object <input type="button" < This a JavaScript element value="Print Form Stuff" onClick="display_formval(this.form);". href="#" onClick=" ;JavaScript: myForm.submit();" /> Click here to submit this form</a> <p> 6 <a href="#" onClick=" ;JavaScript: myForm.reset();". <a href=" ;JavaScript: void(0)" onClick="close_window()"> Click here to close little window</a> </big> </body> </html> EXPLANATION 1 A JavaScript function