| 1 |
root |
1.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 |
|
|
|
