| 1 |
#!/usr/local/bin/perl |
| 2 |
|
| 3 |
# This script illustrates how to use JavaScript to validate fill-out |
| 4 |
# forms. |
| 5 |
use CGI qw(:standard); |
| 6 |
|
| 7 |
# Here's the javascript code that we include in the document. |
| 8 |
$JSCRIPT=<<EOF; |
| 9 |
// validate that the user is the right age. Return |
| 10 |
// false to prevent the form from being submitted. |
| 11 |
function validateForm() { |
| 12 |
var today = new Date(); |
| 13 |
var birthday = validateDate(document.form1.birthdate); |
| 14 |
if (birthday == 0) { |
| 15 |
document.form1.birthdate.focus() |
| 16 |
document.form1.birthdate.select(); |
| 17 |
return false; |
| 18 |
} |
| 19 |
var milliseconds = today.getTime()-birthday; |
| 20 |
var years = milliseconds/(1000 * 60 * 60 * 24 * 365.25); |
| 21 |
if ((years > 20) || (years < 5)) { |
| 22 |
alert("You must be between the ages of 5 and 20 to submit this form"); |
| 23 |
document.form1.birthdate.focus(); |
| 24 |
document.form1.birthdate.select(); |
| 25 |
return false; |
| 26 |
} |
| 27 |
// Since we've calculated the age in years already, |
| 28 |
// we might as well send it up to our CGI script. |
| 29 |
document.form1.age.value=Math.floor(years); |
| 30 |
return true; |
| 31 |
} |
| 32 |
|
| 33 |
// make sure that the contents of the supplied |
| 34 |
// field contain a valid date. |
| 35 |
function validateDate(element) { |
| 36 |
var date = Date.parse(element.value); |
| 37 |
if (0 == date) { |
| 38 |
alert("Please enter date in format MMM DD, YY"); |
| 39 |
element.focus(); |
| 40 |
element.select(); |
| 41 |
} |
| 42 |
return date; |
| 43 |
} |
| 44 |
|
| 45 |
// Compliments, compliments |
| 46 |
function doPraise(element) { |
| 47 |
if (element.checked) { |
| 48 |
self.status=element.value + " is an excellent choice!"; |
| 49 |
return true; |
| 50 |
} else { |
| 51 |
return false; |
| 52 |
} |
| 53 |
} |
| 54 |
|
| 55 |
function checkColor(element) { |
| 56 |
var color = element.options[element.selectedIndex].text; |
| 57 |
if (color == "blonde") { |
| 58 |
if (confirm("Is it true that blondes have more fun?")) |
| 59 |
alert("Darn. That leaves me out."); |
| 60 |
} else |
| 61 |
alert(color + " is a fine choice!"); |
| 62 |
} |
| 63 |
EOF |
| 64 |
; |
| 65 |
|
| 66 |
# here's where the execution begins |
| 67 |
print header; |
| 68 |
print start_html(-title=>'Personal Profile',-script=>$JSCRIPT); |
| 69 |
|
| 70 |
print h1("Big Brother Wants to Know All About You"), |
| 71 |
strong("Note: "),"This page uses JavaScript and requires ", |
| 72 |
"Netscape 2.0 or higher to do anything special."; |
| 73 |
|
| 74 |
&print_prompt(); |
| 75 |
print hr; |
| 76 |
&print_response() if param; |
| 77 |
print end_html; |
| 78 |
|
| 79 |
sub print_prompt { |
| 80 |
print start_form(-name=>'form1', |
| 81 |
-onSubmit=>"return validateForm()"),"\n"; |
| 82 |
print "Birthdate (e.g. Jan 3, 1972): ", |
| 83 |
textfield(-name=>'birthdate', |
| 84 |
-onBlur=>"validateDate(this)"),"<p>\n"; |
| 85 |
print "Sex: ",radio_group(-name=>'gender', |
| 86 |
-value=>[qw/male female/], |
| 87 |
-onClick=>"doPraise(this)"),"<p>\n"; |
| 88 |
print "Hair color: ",popup_menu(-name=>'color', |
| 89 |
-value=>[qw/brunette blonde red gray/], |
| 90 |
-default=>'red', |
| 91 |
-onChange=>"checkColor(this)"),"<p>\n"; |
| 92 |
print hidden(-name=>'age',-value=>0); |
| 93 |
print submit(); |
| 94 |
print end_form; |
| 95 |
} |
| 96 |
|
| 97 |
sub print_response { |
| 98 |
import_names('Q'); |
| 99 |
print h2("Your profile"), |
| 100 |
"You claim to be a ",b($Q::age)," year old ",b($Q::color,$Q::gender),".", |
| 101 |
"You should be ashamed of yourself for lying so ", |
| 102 |
"blatantly to big brother!", |
| 103 |
hr; |
| 104 |
} |
| 105 |
|
