unit 2 — the exciting world of javascript lesson 7 — creating forms with javascript
DESCRIPTION
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.TRANSCRIPT
Unit 2 — The Exciting World of JavaScript
Lesson 7 — Creating Forms with JavaScript
The Exciting World of JavaScript2
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 JavaScript3
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 JavaScript4
Making HTML Forms More Functional (cont.)
Name: <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">
The Exciting World of JavaScript5
Making the Submit Order Button Functional
No. 1: Write a doSubmit() function.
<SCRIPT>function doSubmit(){ alert("Your pizza order has been submitted."); return;}</SCRIPT>
The Exciting World of JavaScript6
Making the Submit Order Button Functional (cont.)
No. 2: Describe the event.
<INPUT TYPE="BUTTON" VALUE="Submit Order" onClick="doSubmit()">
The Exciting World of JavaScript7
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 JavaScript8
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 JavaScript9
Making the Clear Entries Button Functional (cont.)
No. 3: Describe the event.
<INPUT TYPE="BUTTON" VALUE="Clear Entries" onClick="doClear()">
The Exciting World of JavaScript10
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 JavaScript11
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 JavaScript12
Validating Text Fields (cont.)
The doSubmit() function calls an alert when the text fields are empty.
<INPUT TYPE="BUTTON" VALUE="Submit Order" onClick="doSubmit()">
The Exciting World of JavaScript13
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 JavaScript14
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 JavaScript15
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 JavaScript16
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.
<INPUT TYPE="BUTTON" VALUE="Submit Order“ onClick="doSubmit()">
The Exciting World of JavaScript17
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.