# This script illustrates how to use JavaScript to validate fill-out
# Here's the javascript code that we include in the document.
// validate that the user is the right age. Return
// false to prevent the form from being submitted.
function validateForm() {
var birthday = validateDate(document.form1.birthdate);
document.form1.birthdate.focus()
document.form1.birthdate.select();
var milliseconds = today.getTime()-birthday;
var years = milliseconds/(1000 * 60 * 60 * 24 * 365.25);
if ((years > 20) || (years < 5)) {
alert("You must be between the ages of 5 and 20 to submit this form");
document.form1.birthdate.focus();
document.form1.birthdate.select();
// Since we've calculated the age in years already,
// we might as well send it up to our CGI script.
document.form1.age.value=Math.floor(years);
// make sure that the contents of the supplied
// field contain a valid date.
function validateDate(element) {
var date = Date.parse(element.value);
alert("Please enter date in format MMM DD, YY");
// Compliments, compliments
function doPraise(element) {
self.status=element.value + " is an excellent choice!";
function checkColor(element) {
var color = element.options[element.selectedIndex].text;
if (confirm("Is it true that blondes have more fun?"))
alert("Darn. That leaves me out.");
alert(color + " is a fine choice!");
# here's where the execution begins
print start_html
(-title
=>'Personal Profile',-script
=>$JSCRIPT);
print h1
("Big Brother Wants to Know All About You"),
strong
("Note: "),"This page uses JavaScript and requires ",
"Netscape 2.0 or higher to do anything special.";
&print_response
() if param
;
print start_form
(-name
=>'form1',
-onSubmit
=>"return validateForm()"),"\n";
print "Birthdate (e.g. Jan 3, 1972): ",
textfield
(-name
=>'birthdate',
-onBlur
=>"validateDate(this)"),"<p>\n";
print "Sex: ",radio_group
(-name
=>'gender',
-value
=>[qw
/male female/],
-onClick
=>"doPraise(this)"),"<p>\n";
print "Hair color: ",popup_menu
(-name
=>'color',
-value
=>[qw
/brunette blonde red gray/],
-onChange
=>"checkColor(this)"),"<p>\n";
print hidden
(-name
=>'age',-value
=>0);
print h2
("Your profile"),
"You claim to be a ",b
($Q::age
)," year old ",b
($Q::color
,$Q::gender
),".",
"You should be ashamed of yourself for lying so ",
"blatantly to big brother!",