Creating Forms with JavaScript

1
Chapter 7

• Creating Forms with JavaScript

2
Create a Pizza Order Form

• Much of the first part is a review of HTML form
  creation techniques

3
(No Transcript)
4
Build the Textboxes
lthtmlgtltheadgtlttitlegtJavaScript Pizza Order
Formlt/titlegtlt/headgt ltbodygt ltform
name"PizzaForm"gt lth1gtThe JavaScript Pizza
Parlorlt/h1gt ltbrgt lth4gtStep 1 Enter your name,
address, and phone numberlt/h4gt ltfont
face"courier"gt Name nbspnbspnbspltinput
name"customer" type"text" size50gtltbrgt Address
ltinput name"address" type"text"
size50gtltbrgt City nbspnbspnbspltinput
name"city" type"text" size16gtltbrgt State
nbspnbspltinput name"state" type"text"
size4gt Zip ltinput name"zip" type"text"
size8gtltbrgt Phone nbspnbspltinput
name"phone" type"text" size50gtltbrgt lt/fontgtltbrgtlt
brgt
5
Build the Radio Buttons
lth4gtStep 2 Select the size of the pizza you
wantlt/h4gt ltfont face"courier"gt ltinput
name"size" type"radio"gtSmall ltinput name"size"
type"radio"gtMedium ltinput name"size"
type"radio"gtLargeltBRgt lt/fontgtltbrgtltbrgt
6
Build the Checkboxes
lth4gtStep 3 Select the pizza toppings you
wantlt/h4gt ltfont face"courier"gt ltinput
name"toppings" type"checkbox"gtPepperoni ltinput
name"toppings" type"checkbox"gtCanadian
Bacon ltinput name"toppings" type"checkbox"gtSausa
geltbrgt ltinput name"toppings" type"checkbox"gtMush
rooms ltinput name"toppings" type"checkbox"gtPinea
pple ltinput name"toppings" type"checkbox"gtBlack
Olivesltbrgt lt/fontgtltbrgtltbrgt
7
Build the Buttons and Close
ltinput type"button" value"Submit Order"gt ltinput
type"button" value"Clear Entries"gt lt/formgtlt/body
gtlt/htmlgt
8
Make the Submit Button Functional

• Create a function that is initiated when the
  Submit button is selected.

At the Submit Button add the following
command ltinput type"button" value"Submit
Order" onClick"doSubmit()"gt
After the lttitlegt tag, add the following ltscript
gt function doSubmit() alert("Your pizza order
has been submitted.") return lt/scriptgt
9
When you click Submit
10
Make the Clear button functional

• In this process, you need to reset or
  reinitialize all of the features on the page.
• You will no doubt recognize many of the
  techniques from other programming languages.

11
Add the doClear() 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.size0.checked
false document.PizzaForm.size1.checked
false document.PizzaForm.size2.checked
false document.PizzaForm.toppings0.checked
false document.PizzaForm.toppings1.checked
false document.PizzaForm.toppings2.checked
false document.PizzaForm.toppings3.checked
false document.PizzaForm.toppings4.checked
false document.PizzaForm.toppings5.checked
false return
12
Add event to clear button
ltinput type"button" value"Clear Entries"
onClick"doClear()"gt
Run it!
13
Data validation

• This is probably one of the most critical
  features of any application
• Add controls to bullet-proof your program.
• Remember if the users bad data entry causes your
  program to fail, it will always be your fault no
  matter what the user does.

14
Add the validateText Function to your program.
function validateText() if (document.PizzaForm.
customer.value "") return false if
(document.PizzaForm.address.value "") return
false if (document.PizzaForm.city.value "")
return false if (document.PizzaForm.phone.value
"") return false return true

• This is a simple data entry check for nulls in
  the textboxes.

15
Add the call in the doSubmit Function
function doSubmit() if (validateText()
false) alert("Required data missing in Step
1") return alert("Your pizza order has
been submitted.") return
16
Blank entry causes the error message
17
Validate the Radio Buttons
function validateRadio() if
(document.PizzaForm.size0.checked) return
true if (document.PizzaForm.size1.checked)
return true if (document.PizzaForm.size2.check
ed) return true return false
As opposed to the text validation which checked
for FALSE and returned TRUE on GOOD data,This
code checks for TRUE and returns FALSEon BAD
data
18
Another way to test
function doSubmit() if (validateText()
false) Is the same as function
doSubmit() if (!validateText())
Note NOT