FormBuilder - Perl CGI Form Builder CPAN module

::Features ::Download ::Tutorial ::Examples
::Documentation ::FormBuilder Google Group ::Old List Archives ::Contribute

Note: The mailing list is has been replaced by the Google FormBuilder Group

Basic

1. Intro to FormBuilder
2. A Simple Form
3. Form Method
4. Input Validation
5. Field Options
6. Multi-Select Lists
7. Field Data
8. Field Attributes
9. HTML Formatting
10. Custom Headers
S. Summary

Intermediate

1. Trickier Forms
2. Perl References
3. Default Values
4. CGI Stickiness
5. JavaScript Actions
6. Input Validation 2
7. Multiple Submits
8. JavaScript Actions 2
9. Modules & mod_perl
10. Smartness
S. Summary

Advanced

1. Remaining Features
2. Intro to Templates
3. HTML::Template
4. HTML::Template 2
5. Template Toolkit
6. Exploiting render()
7. Multi-Screen Apps
8. Multi-Screen Apps 2
9. Multi-Screen Apps 3
10. Custom Messages
S. Summary

Intermediate Tutorial - Step 8: JavaScript Actions 2 Print

<< Multiple Submits | Modules & mod_perl >>

We saw earlier how JavaScript actions could be attached to fields by using jsclick. Similar functionality is provided for your top-level form as well. Instead of using onSubmit, two other options can be specified to new():

jsfunc - JavaScript code placed inside FormBuilder's validate function
jshead - JavaScript code placed inside <head>

Let's look at how each is used.

In our preceding example, we wanted to change how we validate the form depending on what submit button was clicked. It would be nice if we could skip validation entirely if the user hits "Cancel", and it would also be nice to pop up a special confirmation box if the user hits "Delete", to prevent accidents. No problem:

$form = CGI::FormBuilder->new(
             method => 'post',
             fields => \@fields,
             submit => [qw/Update Delete Cancel/],
             reset  => 0,         # turn off reset button
             jsfunc => <<EOJS

if (form._submit.value == "Delete") {
    if (confirm("Really DELETE this entry?")) return true;
    return false;
} else if (form._submit.value == "Cancel") {
    return true;    
}

EOJS
        );

The value of the submit button is held in the special field form._submit.value. If the user clicks "Delete", then a dialog box will pop up, asking them to confirm their selection. If they hit "Ok", then it will return true (skipping validation). Otherwise, it will return false (failing validation).

If the user hits "Cancel", then it will again return true, skipping all validation. The JavaScript you specify to jsfunc is inserted before FormBuilder's generated JavaScript, so controlling validation is easy:

To fail validation, preventing submit: return false
To skip all validation, allowing submit: return true
To allow validation to proceed normally: do nothing

You should view this script in action, to get a better feel for how this works. Make sure to view the HTML source as well.

The jshead option really deserves little mention. This allows you to insert arbitrary JavaScript code into the start of your document. However, FormBuilder will not call this code ever, so it's rarely useful.

<< Multiple Submits | Modules & mod_perl >>