ptg 356 Chapter 11 • Working with Forms and Input Devices 11.4.4 Submitting Fillout Forms Submitting an HTML Form Without JavaScript. When the user clicks a submit button, the form is normally sent to the server for further processing by another appli- cation such as a PHP, ASP.NET, or CGI script. Before the server gets the form, its content is gathered by the browser, URL encoded, and then sent to the address supplied in the action attribute of the form. (In the previous examples, the action attribute was not used because there was no reason to process the user input in the sample forms.) The appli- cation on the server side decodes and processes the form information. From there, an acknowledgment can be sent back to the user, an e-mail delivered, the processed infor- mation sent to a database, or whatever else we define. Now let’s look at an example of an HTML form and how it is submitted to a server application. After the user fills out the form, he or she will click the Submit button. The form data will be collected by the browser as name/value pairs and sent to the server. The method attribute determines how the data is sent (as a query string or message body) and the action attribute determines where it will be sent (the URL of a server). Figure 11.15 What went wrong? Watch your spelling! We tried to reference a form by the wrong name! EXAMPLE 11.8 <html> <head><title>An HTML Form</title></head> <body><big><strong> 1 <form action="/cgi-bin/bookstuff/form1.cgi" method="post"><p> <fieldset><legend>All About You</legend> <p> Type your name here: 2 <input type="text" name="namestring" size="50" /> </p> <b>Choose a work place:</b><br /> 3 <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 <br /> From the Library of WoweBook.Com ptg 11.4 JavaScript and the form Object 357 <br /> <input type="radio" name="status" value="senior" id="senior" /> <label for="senior">senior</label> <br /> <input type="radio" name="status" value="adult" id="adult" /> <label for="senior">adult</label> <br /> <input type="radio" name="status" value="child" id="child" /> <label for="senior">child</label> <br /> <br />Choose a vacation spot:<br /> 4 <select multiple name="location" /> <option selected value="hawaii"> Hawaii </option> <option value="bali">Bali </option> <option value="maine">Maine </option> <option value="paris">Paris </option> </select> <p> </fieldset> 5 <input type="submit" value="Submit" /> 6 <input type="reset" value="Clear" /> </p> </form> 7 </big> </strong> </body> </html> EXPLANATION 1 The form starts here. The action attribute contains the URL of the server program that will get the form. The method being used (how the form will be sent) is the post method. This is the most common method used with forms. 2 The user is asked to type something into a text field box. 3 The user is asked to check a box for his or her place of work. 4 The user is asked to select a vacation spot from a select menu, or drop-down list. Because this is set to multiple, it allows more than one option to be chosen. 5 When the user clicks the Submit button, the form is sent to the URL (server pro- gram) assigned to the action attribute of the <form> tag. 6 If the user clicks the Clear button, all fields will be reset to their defaults. 7 This tag marks the end of the form. See Figure 11.16. EXAMPLE 11.8 (CONTINUED) From the Library of WoweBook.Com ptg 358 Chapter 11 • Working with Forms and Input Devices Submitting a Form with an Image Button. The image input type gives you another way to submit a form. You can replace the standard Submit button with a graph- ical image. The src attribute must be included to specify the location (URL) of the image. As with other image tags, the alt attribute (HTML 4.0) should be used to give replacement text for browsers that cannot load the image. Many browsers rely on either the name or value attribute as alternate text, so if there is any doubt, all three attributes for the same purpose should be used. Figure 11.16 An HTML form. EXAMPLE 11.9 <html> <head><title>An Image Input Type</title></head> <body bgcolor="magenta"> <big> <div align="center"> Enter your name: <br /> 1 <form action="http://localhost/cgi-bin/example.cgi" method="post"> 2 <input type="text" id="textfield" size=50 /> <p> From the Library of WoweBook.Com ptg 11.4 JavaScript and the form Object 359 Submitting a Form with JavaScript (Event Handlers). A discussion of forms would be incomplete without mentioning how JavaScript implements form events (see Chapter 13 for a complete discussion). Events are triggered by a user when he or she initiates some action, like pressing a key, clicking the mouse on a button, or moving the mouse over a link. When such an action occurs, the browser detects it, and depending 3 <input type="image" name="submitbutton" src="submit.gif" alt="submit" /> <br /> 4 <input type="reset"> 5 </form> </div> </big> </body> </html> EXPLANATION 1 The HTML form starts here using the POST method to send the form input. 2 The input type is text. The user enters his or her name here. 3 The input type is a GIF image submit button. When the user clicks on the image, the form will be submitted and sent to the CGI program assigned to the form’s ac- tion attribute. The src attribute is assigned the URL of the submit.gif image. If the image can’t be loaded, the alt attribute will cause the word “submit” to appear where the image should go. 4 When the user clicks the Reset button (see Figure 11.17), the textbox will be cleared. 5 The HTML form ends here. Figure 11.17 An image as a submit button (IE). EXAMPLE 11.9 (CONTINUED) From the Library of WoweBook.Com ptg 360 Chapter 11 • Working with Forms and Input Devices on what event is triggered, something will be done in response. A function might be called, a form can be validated—something happens. See Figure 11.18. With a form, an event handler allows you to control whether the form is submitted or cleared. For example, after the user has filled out the form, normally it is sent right off to a CGI, PHP, or ASP program on the server side to be processed. But if a JavaScript event handler is set up, then when the user clicks the submit button, the handler can check the input data, and based on what comes in, determine whether to go ahead with the submission of the form data or reject it without refreshing the page. That way, the user doesn’t have to wait for the form to go to the server, have it validated there, and then sent back for mistakes that could have been corrected right away. (See section “Form Validation with Regular Expressions” on page 765 in Chapter 17 for a complete discus- sion.) Likewise, before clearing all the values typed into the form, an event handler can confirm with the user that this is really what he or she wants to do, before resetting all the input devices to their default values. With forms there are two event handlers that allow you to catch the form before it goes to the server. They are the onClick event handler and the onSubmit event handler. The onReset event can be used to clear the form’s input devices or to stop them from being cleared. The onClick Event Handler. One way to either accept or reject the submission is to use the onClick event handler. The onClick event handler is an attribute of the HTML sub- mit or button input type. When the user clicks the button, the event is triggered, and if the handler function returns true, the form will be submitted; otherwise, it will be rejected. Figure 11.18 The user initiates an action, and an event is triggered. EXAMPLE 11.10 <html> <head><title>onClick Event Handler and Forms</title> <script type="text/javascript"> 1 function readySubmit(){ if(confirm("Are you ready to submit your form? ")){ return true; } else{ return false; } } </script> </head> From the Library of WoweBook.Com ptg 11.4 JavaScript and the form Object 361 <body> 2 <form action="http://cgi-bin/testform.cgi" method="post"> Enter your user id: 3 <input type="text" name="textbox" value="" /> <br /> Type your password: <input type="password" name="secret" /> <p></p> 4 <input type="submit" onClick="readySubmit();" /> </form> </body> </html> EXPLANATION 1 The JavaScript function called readySubmit() is defined. It will display a confirm dialog box. If the user clicks OK, a true value will be returned and the form will be submitted. If the user clicks Cancel, false will be returned, and the form will be stopped (see Figure 11.19). 2 The form starts here. When submitted, it will go to the server-side CGI program. The URL of the CGI program is assigned to the action attribute of the HTML <form> tag. 3 The input types for this form are a text field and a password field. 4 When the user clicks the submit button, the onClick event handler is triggered. It will handle the event by invoking the JavaScript function called readySubmit(). Figure 11.19 Submitting a form and the onClick event. EXAMPLE 11.10 (CONTINUED) From the Library of WoweBook.Com ptg 362 Chapter 11 • Working with Forms and Input Devices The onSubmit Event Handler. Another important form event handler, called onSub- mit, will also be triggered when the user clicks the submit button or presses the Enter key, just before the form is submitted. The onSubmit event handler is added as an attribute of the <form> tag (and only the <form> tag), to control what happens when the user clicks the submit button. When a function is assigned to the onSubmit event handler, if the value returned by the function is true, the form will be submitted to the server, but if it returns false, the form will be stopped and the user will be given a chance to reenter data in the form. Example 11.11 produces the same output as the previous one, but notice the placement of the handler. Instead of being associated with a button, it is associated with the form and set as an attribute of the <form> tag. EXAMPLE 11.11 <html> <head><title>onSubmit Event Handler and Forms</title> <script type="test/JavaScript"> 1 function readySubmit(){ if(confirm("Are you ready to submit your form? ")){ return true;} else{ return false;} } </script> </head> <body> <form action="cgi-bin/testform.cgi" method="post" 2 onSubmit="return(readySubmit());" > Enter your user id: <input type="text" name="textbox" value="" /> <br /> Type your password: <input type="password" name="secret" /> <p> 3 <input type="submit" /> </form> </body> </html> EXPLANATION 1 The JavaScript function called readySubmit() is defined. It will display a confirm dialog box. If the user clicks OK, a true value will be returned and the form will be submitted. If the user clicks Cancel, false will be returned, and the form will be stopped. From the Library of WoweBook.Com ptg 11.4 JavaScript and the form Object 363 The onReset Event Handler. The HTML reset button allows the user to clear the form fields and set them back to their default values. JavaScript will let you set up an onReset event handler to either accept or reject this action. This event handler can be used to make sure that clearing an entire form is really what you want to do before it’s too late, especially if you’ve done a lot of typing and don’t want to reenter all that data. It is an attribute of the <form> tag. 2 The onSubmit event handler is an attribute of the HTML <form> tag. It will catch the form just before it is sent off to the server. When the user clicks the submit button, the event handler readySubmit() will be invoked. If the event handler is called by the onSubmit attribute of the <form> tag, an explicit return must be used (see Figure 11.20). 3 The input type is a submit button. When the user clicks this button, the JavaScript onSubmit event is triggered. (See line 2.) Figure 11.20 Submitting a form and the onSubmit event handler. EXAMPLE 11.12 <html> <head><title>The onReset Event</title> <script type="text/javascript"> 1 function resetAll(){ 2 if(confirm("Do you want to reset the form to its default " + " values? ")){ 3 return true; } else{ 4 return false; } } </script> </head> Continues EXPLANATION ( CONTINUED) From the Library of WoweBook.Com ptg 364 Chapter 11 • Working with Forms and Input Devices <body> 5 <form action="http://cgi-bin/testform.cgi" method="post" onReset="return resetAll();" /> Enter your user id: 6 <input type="text" name="textbox" value="Name? " id="textbox" /> value="Name? " /> <p>Type your password: 7 <input type="password" name="secret" id="secret" /> </p><p> <input type="submit"/> 8 <input type="reset" value="Reset Form"/> </p> </form> </body> </html> EXPLANATION 1 The function called resetAll() is defined. It is invoked when the onReset event han- dler is triggered. 2 If the user clicks the Reset button on line 8, he or she sees this confirm dialog box, a true value will be returned by this function, allowing the reset to clear all the input fields and set them back to their original values. 3 If a value true is returned, the fields will be cleared. 4 If a value of false is returned by this function, the reset action will be dismissed. 5 The form starts here. The onReset event handler is an attribute of the <form> tag. 6, 7 The input types for this form are a text field and a password field. 8 The reset button is used to reset the form fields back to their original values. When this button is clicked, the onReset event handler will be triggered. See Figure 11.21. EXAMPLE 11.12 (CONTINUED) From the Library of WoweBook.Com 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 . WoweBook.Com ptg 11.4 JavaScript and the form Object 359 Submitting a Form with JavaScript (Event Handlers). A discussion of forms would be incomplete without mentioning how JavaScript implements. WoweBook.Com ptg 11.4 JavaScript and the form Object 363 The onReset Event Handler. The HTML reset button allows the user to clear the form fields and set them back to their default values. JavaScript. 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);"