1 / 17

Lesson 7

Lesson 7. Creating Forms with JavaScript. 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. Making HTML Forms More Functional.

morrison
Download Presentation

Lesson 7

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Lesson 7 Creating Forms with 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.

  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. Step-by-Step 7.1

  4. Making HTML Forms More Functional Name: &nbsp;&nbsp;&nbsp;<INPUT NAME="customer" TYPE="TEXT" SIZE=50> <INPUT NAME="size" TYPE="RADIO">Small <INPUT NAME="toppings" TYPE="CHECKBOX"> Pepperoni <INPUT TYPE="BUTTON" VALUE="Submit Order"> Step-by-Step 7.1

  5. Making the Submit Order Button Functional No. 1: Write a doSubmit() function: <SCRIPT> function doSubmit() { alert("Your pizza order has been submitted."); return; } </SCRIPT> Step-by-Step 7.2

  6. Making the Submit Order Button Functional No. 2: Describe the event: <INPUT TYPE="BUTTON" VALUE="Submit Order" onClick="doSubmit()"> Step-by-Step 7.2

  7. No. 1: Write adoClear()function: 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; } Making the Clear Entries Button Functional Step-by-Step 7.3

  8. No. 1: 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 (""). Making the Clear Entries Button Functional Step-by-Step 7.3

  9. Making the Clear Entries Button Functional No. 2: Describe the event: <INPUT TYPE="BUTTON" VALUE="Clear Entries“ onClick="doClear()"> Step-by-Step 7.3

  10. Validating Text Fields Validation: Programmer checks to make sure that a form has no missing data using a validateText() function. This takes an ifstatement followed by an alert message. Step-by-Step 7.4

  11. Validating Text Fields 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; } Step-by-Step 7.4

  12. Validating Text Fields The doSubmit() function calls an alert when the text fields are empty: <INPUT TYPE="BUTTON" VALUE="Submit Order" onClick="doSubmit()"> Step-by-Step 7.4

  13. Validating Radio Buttons Validation is also important for Radio Buttons. Customers need to be alerted to select the size of their pizza! Step-by-Step 7.5

  14. Validating Radio Buttons 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; } Step-by-Step 7.5

  15. Validating Radio Buttons 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; } Step-by-Step 7.5

  16. Validating Radio Buttons 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. <INPUT TYPE="BUTTON" VALUE="Submit Order“ onClick="doSubmit()"> Step-by-Step 7.5

  17. Summary In this lesson you learned: • You can understand the purpose of JavaScript input controls. • To use JavaScript input controls. • You can understand the benefits of data validation. • To create an HTML form that will accept JavaScript code. • To enhance HTML forms with JavaScript.

More Related