Unit 2 — The Exciting Worldof JavaScript
Lesson 7 — CreatingForms with JavaScript
The Exciting World of JavaScript
2
Objectives
Understand the purpose and usage ofJavaScript input controls.
Understand the benefits of data validation.
Create an HTML form.
Enhance the functionality of HTML forms withJavaScript.
The Exciting World of JavaScript
3
Making HTML Forms MoreFunctional
Controls/components: Interactive objectswith a JavaScript form. Controls orcomponents must be given a name so theycan be referenced within JavaScript code.
Data validation: The process of checkinguser input data to make sure it is completeand accurate.
The Exciting World of JavaScript
4
Making HTML Forms MoreFunctional (cont.)
Name: <INPUTNAME="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 JavaScript
5
Making the Submit Order ButtonFunctional
No. 1: Write a doSubmit() function.
<SCRIPT>
function doSubmit()
{
alert("Your pizza order has been submitted.");
return;
}
</SCRIPT>
The Exciting World of JavaScript
6
Making the Submit Order ButtonFunctional (cont.)
No. 2: Describe the event.
<INPUT TYPE="BUTTON" VALUE="Submit Order"onClick="doSubmit()">
The Exciting World of JavaScript
7
Making the Clear Entries ButtonFunctional
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 ButtonFunctional (cont.)
No. 2: Reference the text control objects.
document.PizzaForm.customer.value = ""
The name customer is an element within theFORM object named PizzaForm. This iscontained in the document object. Clear thevalue stored in that text field by assigning anempty string ("").
The Exciting World of JavaScript
9
Making the Clear Entries ButtonFunctional (cont.)
No. 3: Describe theevent.
<INPUT TYPE="BUTTON"
VALUE="Clear Entries"
onClick="doClear()">
The Exciting World of JavaScript
10
Validating Text Fields
Validation:Programmer checksto make sure that aform has no missingdata using avalidateText()function. This takesan if statementfollowed by an alertmessage.
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 thetext fields are empty.
<INPUT TYPE="BUTTON" VALUE="Submit Order" onClick="doSubmit()">
The Exciting World of JavaScript
13
Validating Radio Buttons
Validation is also important for Radio Buttons.Customers need to be alerted to select thesize of their pizza!
The Exciting World of JavaScript
14
Validating Radio Buttons (cont.)
No 1: Alter the doSubmit() function to check theobject’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 thetext boxes and the radio buttons for data. An alertappears when a radio button is not selected.
<INPUT TYPE="BUTTON" VALUE="Submit Order“ onClick="doSubmit()">
The Exciting World of JavaScript
17
Summary
You can understand the purpose of JavaScriptinput controls.
You can use JavaScript input controls.
You can understand the benefits of datavalidation.
You can create an HTML form that will acceptJavaScript code.
You can enhance HTML forms with JavaScript.