Walk through the process of invoking a CGI from an HTML form. Topics include:
Processing when Submit button pressed
Data checking
Building form dataset
Passing request to server
Server set up to run CGI
Possible actions of CGI
Note: I strongly suggest you view all our videos in full screen mode: click the icon
in the lower right corner of the video area (it shows four arrows pointing
to the corners of the screen). When you are done, the Esc ("escape") key
returns you to regular mode.
This exercise is primarily focused on using some entry data validation.
We have supplied two files to help you do this: "validationRoutines.js" and "checkValsModel.txt".
First, get familiar with the three functions included in "validationRoutines.js":
The function "isValidName" is passed the value of a string that is supposed to hold a person's name
The function "isValidText" is passed the value of a general text string
Both of the above functions check that the tested field only contains allowed characters and return 'false'
if they find dis-allowed characters
You might want to create variations of these functions for specific types of text strings
you have in forms for your pages (you should probably keep a copy of the original versions)
The function "stringErrMsg" is passed a short description of the control in error
and the string of allowed characters for that field and
issues an 'alert' to the user
Make any changes you need and then save this file with a unique
name and add a <script> element with src= this name to the page containing the form (Note:
you may not need to change the script at all)
Next, learn how to use "checkValsModel.txt":
Copy and modify parts of this file into a <script> element
in a page, building your own version of "checkVals()"
So, in your page, add a <script> start tag, followed by a </script> end tag
Then copy the first two lines from "checkValsModel.txt" into your page, right after
the <script> start tag
There are two model test sections, one invokes "isValidName()" and the other invokes
"isValidText()"; build your own checkVals() function for your page using these two
model functions
For each personal name input field in the form, copy the "if" statement that checks on
"isValidName":
change the two occurrences of "**id" to be the id of the field you are testing
if necessary, change the list of characters assigned to "allowed" in the first line (Note: if
you do this, you will need to change the code in isValidName() in the validationRoutines.js script)
change the string "++field_being_tested" to have a short text identifying which field this is for
For each general text input field in the form, copy the "if" statement that checks on
"isValidText":
change the two occurrences of "**id" to be the id of the field you are testing
if necessary, change the list of characters assigned to "allowed" in the first line (Note: if
you do this, you will need to change the code in isValidText() in the validationRoutines.js script)
change the string "++field_being_tested" to have a short text identifying which field this is for
Copy the last two lines from checkValsModel.txt to just before your </script> end tag.
The rest of this lab will demonstrate using these files for the Suggestion Box page;
we'll look at the Tripsite page later.
Open "SuggestionBox.shtml" and make the following changes:
After the title element, add a script element with src=validationRoutines.js
Then add another script element with the content inline, drawn from "checkValsModel.txt":
copy the first two lines (the function declaration and openning brace)
copy the test for 'isValidName' and
replace '**id' with 'name' (both occurrences)
replace '++field_being_tested' with 'the name field'
copy the test for 'isValidText' and
replace '**id' with 'suggestion' (both occurrences)
replace '++field_being_tested' with 'the suggestion field'
copy in the last two lines from "checkValsModel.txt" to the end of the script
Modify "suggest.shtml" by including onsubmit="return checkVals();" in the form element start tag
Save and upload "SuggestionBox.shtml" and "suggest.shtml"
Test that bad data does not get through when entered in the name or suggestion fields (the cgi won't work, of course)
Supplemental materials
A cumulative summary of the contents of this course so far:
Click here
For a combined cumulative summary of both Web courses so far,
Click here
Email us
if you would like additional information.
We would love to see your comments and
recommendations for our site.
Our privacy
policy: we use cookies to keep track
of where you are on the site, but we do not
leave cookies on your site; we do not track
your visits; we do not disseminate any
information about you because we do not
gather any information about you.