Lesson 8 Creating Forms with JavaScript HTML and JavaScript BASICS, 4th Edition Barksdale / Turner

Objectives Create an HTML form. Make a form submission button functional. Make a form clearing button functional. Validate text fields with JavaScript. Validate radio buttons with JavaScript. 2

Vocabulary check box components controls data validation radio button text field 3

Making HTML Forms More Functional Start by defining the general layout of the form on a Web page using HTML tags. Identify the various objects in the HTML form with which the users interact. Name each of these interactive objects (also called controls or components). Write the JavaScript functions invoked when the user triggers a specific JavaScript event. 4

Making HTML Forms More Functional (continued) Data validation is the process of checking user input data to make sure that it is complete and accurate. There are many kinds of mistakes, such as missing data, which can be detected by JavaScript. 5

Creating a Pizza Order Form The first step in creating an effective order form for the JavaScript Pizza Parlor is to define its appearance on the Web page with the appropriate HTML tags. Pay close attention to the name attribute used in the HTML tags. Although the names do not affect the form appearance, they are critical elements of the document. 6

Creating a Pizza Order Form (continued) Text field: Input control that allows the user to enter a string value into a specific location on the Web page. Radio button (option button): Input control that allows the user to select just one option from a set of options. Check box: Input control that allows the user to select any number of options from a set of options. 7

Creating a Pizza Order Form (continued) You can use text fields, radio buttons, and check boxes within the same form. Pizza Order Form 8

Creating a Pizza Order Form (continued) A string is a sequence of one or more characters, and can consist of a single word, a complete sentence, or an entire chapter of a book. Normally, strings contain meaningful text, but this is not a requirement. 9

Making the Submit Order Button Functional To start, add a JavaScript function that will be called when the user clicks the Submit Order button. In this case, you enter a doSubmit() function that invokes the alert() method. To get the Submit Order button to call a JavaScript function when it is clicked, you use an event called onClick. 10

Making the Submit Order Button Functional (continued) It is important to give users feedback and to let them know their order has been processed. Web page with Submit Order button clicked 11 11

Making the Clear Entries Button Functional You can build features into forms to make it easy for people to correct their errors. Add the doClear() function. Add an onClick event to the <input> tag of the Clear Entries button. This event will call the doClear() function to erase any existing form data. 12 12

Validating Text Fields The validateText() function can only return one of two possible values: false or true. The false value is returned if the value property of an object is an empty string. If none of the required text fields are blank, meaning a user entered something in each of the fields, the function returns the true value. 13 13

Validating Text Fields (continued) The DoSubmit() function evaluates the validateText() function and displays an alert box if information is missing. Data validation – text fields 14 14

Validating Radio Buttons To validate a set of radio buttons, you need to test the value of each object’s checked property to see if it is set to true or false. The validateRadio() function returns a true value if it encounters a selected radio button. However, if none of the radio buttons in the set is selected, the function returns a false value. 15 15

Summary In this lesson, you learned: How to create an HTML form. How to make a form submission button functional. How to make a form clearing button functional. How to validate text fields with JavaScript. How to validate radio buttons with JavaScript. 16