Unit 2 — The Exciting World of JavaScript Lesson 7 — Creating Forms with JavaScript

The Exciting World of JavaScript 2 Objectives Understand the purpose and usage of JavaScript input controls. Understand the benefits of data validation. Create an HTML form. Enhance the functionality of HTML forms with JavaScript.

The Exciting World of JavaScript 3 Making HTML Forms More Functional Controls/components: Interactive objects with a JavaScript form. Controls or components must be given a name so they can be referenced within JavaScript code. Data validation: The process of checking user input data to make sure it is complete and accurate.

The Exciting World of JavaScript 4 Making HTML Forms More Functional (cont.) Name: Small Pepperoni

The Exciting World of JavaScript 5 Making the Submit Order Button Functional No. 1: Write a doSubmit() function. function doSubmit() { alert("Your pizza order has been submitted."); return; }

The Exciting World of JavaScript 6 Making the Submit Order Button Functional (cont.) No. 2: Describe the event.

The Exciting World of JavaScript 7 Making the Clear Entries Button Functional function doClear() { document.PizzaForm.customer.value = ""; document.PizzaForm.address.value = ""; document.PizzaForm.city.value = ""; document.PizzaForm.state.value = ""; document.PizzaForm.zip.value = ""; document.PizzaForm.phone.value = ""; document.PizzaForm.size[0].checked = false; document.PizzaForm.size[1].checked = false; document.PizzaForm.size[2].checked = false; document.PizzaForm.toppings[0].checked = false; document.PizzaForm.toppings[1].checked = false; document.PizzaForm.toppings[2].checked = false; document.PizzaForm.toppings[3].checked = false; document.PizzaForm.toppings[4].checked = false; document.PizzaForm.toppings[5].checked = false; return; } No. 1: Write a doClear() function.

The Exciting World of JavaScript 8 Making the Clear Entries Button Functional (cont.) No. 2: Reference the text control objects. document.PizzaForm.customer.value = "" The name customer is an element within the FORM object named PizzaForm. This is contained in the document object. Clear the value stored in that text field by assigning an empty string ("").

The Exciting World of JavaScript 9 Making the Clear Entries Button Functional (cont.) No. 3: Describe the event. <INPUT TYPE="BUTTON" VALUE="Clear Entries" onClick="doClear()">

The Exciting World of JavaScript 10 Validating Text Fields Validation: Programmer checks to make sure that a form has no missing data using a validateText() function. This takes an if statement followed by an alert message.

The Exciting World of JavaScript 11 Validating Text Fields (cont.) The doSubmit() function looks for text. With no text, an alert is called. function doSubmit() { if (validateText() == false) { alert("Required data missing in Step 1"); return; } alert("Your pizza order has been submitted."); return; }

The Exciting World of JavaScript 12 Validating Text Fields (cont.) The doSubmit() function calls an alert when the text fields are empty.

The Exciting World of JavaScript 13 Validating Radio Buttons Validation is also important for Radio Buttons. Customers need to be alerted to select the size of their pizza!

The Exciting World of JavaScript 14 Validating Radio Buttons (cont.) No 1: Alter the doSubmit() function to check the object’s value property. function doSubmit() { if (validateRadio() == false) { alert("Required data missing in Step 2"); return; } alert("Your pizza order has been submitted."); return; }

The Exciting World of JavaScript 15 Validating Radio Buttons (cont.) No. 2: Write the validateRadio() function. function validateRadio() { if (document.PizzaForm.size[0].checked) return true; if (document.PizzaForm.size[1].checked) return true; if (document.PizzaForm.size[2].checked) return true; return false; }

The Exciting World of JavaScript 16 Validating Radio Buttons (cont.) No. 3: The doSubmit() function now checks both the text boxes and the radio buttons for data. An alert appears when a radio button is not selected.

The Exciting World of JavaScript 17 Summary You can understand the purpose of JavaScript input controls. You can use JavaScript input controls. You can understand the benefits of data validation. You can create an HTML form that will accept JavaScript code. You can enhance HTML forms with JavaScript.