contrib/perl5/eg/cgi/javascript.cgi

   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