Printing the form inputs

Summary   : How to add a print button to your form
Author    : Peter Koch
Created   : 2006-06-11
Revisions :
Based on  : Facile Forms 1.4.4,  Joomla 1.0.9 
Applies to: Facile Forms 1.0.0 ... 1.4.4, Joomla 1.0.0 ... 1.0.9, Mambo 4.5.1 ... 4.5.4

Contents 1 Outline 2 Creating the print form 2.1 Modifying the form settings 2.2 Changing the elements 2.2.1 Subject Text Input 2.2.2 Urgent Checkbox 2.2.3 Message Textarea 2.2.4 Sendto Selectlist 2.2.5 Submit Button 2.3 Adding a Hidden Element 3 Adding the print button to the main form 4 Questions and comments

Outline

There shall be a button to print out the form inputs in convenient way, without having to print the whole page.

Our main form is assumed to have these elements:

• A text input called "subject"
• A checkbox called "urgent"
• A textarea input called "message"
• A select list called "sendto" with the options "Sales", "Support" and "Accounting"

Creating the main form is not the topic of this howto. You can find the package for this howto in the download section.

This is the outline how we add the printing facility:

• Create a second form for the print layout (calling this the "print form"). This form will be run in a popup window.
• In the print form, receive the inputs as GET/POST values, using the ff_getParam PHP function and enter or set the elements accordingly.
• Make the browser do the printing. When printing is terminated (or aborted), close the window.
• Create a print button in the main form. It will have a custom action script which opens a window for the print form and passes the current inputs in the url.

Creating the print form

In this howto we want our printout to look as close as possible to the original form. Therefore we will just copy the main form and make the necessary modifications. But of couse you are free to rearrange or layout the printed form as ever you like.

First create a copy of the main form: Check the form in the Manage Forms screen and then click on Copy. You can identify the new form by the higher ID, but it doesn't really matter which one you modify as print form since yet they are completely identical.

Modifying the form settings

• Open the form settings and change the title and name. We use the title Print Form and the name prt_print_form in our sample.
• Go to the Scripts tab and change the Submitted Script to None.
• Go to the Pieces tab, change the Before Form piece to Library and select FF:ff_InitLib to load the standard library.
• Save the form settings

Changing the elements

Subject Text Input

• Enter this in the Value textarea:

<?php return ff_getParam('ff_param_subject'); ?>

• Change to the Scripts tab and set the Validation Script to None
• Save the element settings

Check:

Add &ff_param_subject=foo to the end or the url in the browser window and hit the enter key. The subject field should now show foo.

Urgent Checkbox

• Go to the Scripts tab and switch Init Script to Custom
• Make sure that Form Entry is checked and Page Entry is unchecked.
• Click on Create code framework and confirm the question.
• Change the created code to:

function ff_urgent_init(element, condition)
{
    element.checked = <?php return ff_getParam('ff_param_urgent',0); ?>;
} // ff_urgent_init

• Save the element settings

Check:

Add &ff_param_urgent=1 to the end or the url in the browser window and hit the enter key. The urgent checkbox should now be checked.

Message Textarea

• Enter this in Value:

<?php return ff_getParam('ff_param_message'); ?>

• Go to the Scripts tab and set the Validation Script to None
• Save the element settings

Check:

Add &ff_param_message=bar to the end or the url in the browser window and hit the enter key. The message field should now show bar.

Sendto Selectlist

• Go to the Scripts tab.
• Change the Validation Script to None
• Change the Init Script to Custom
• Make sure that Form Entry is checked and Page Entry is unchecked.
• Click on Create code framework and confirm the question.
• Change the created code to:

function ff_sendto_init(element, condition)
{
    opts = element.options;
    for (o = 0; o < opts.length; o++) 
        if ('<?php return ff_getParam('ff_param_sendto'); ?>' == opts[o].value)
            opts[o].selected = true;
} // ff_sendto_init

This will loop through the options and set the right one selected

• Save the element settings

Check:

Add &ff_param_sendto=Support to the end or the url in the browser window and hit the enter key. The select list should now show Support.

Submit Button

• Delete the button, we dont want it to be printed.

Adding a Hidden Element

We now need to add Javascript calls to print out the form and then close the window. You may think that the form init script would be a good place for that, however that will not work reliable. The reason is, that the form init script would run before the element init scripts, and so printing could take place before all elements have completed theire init scripts. As workaround we therefore add a hidden element which will overtake the job.

• Create a new hidden element with title Print and name print.
• Leave the Value empty.
• Go to the Scripts tab.
• Change the Initialization Script to Custom
• Click on Create code framework and confirm the question.
• Change the created code to:

function ff_print_init(element, condition)
{
    if ('<?php return ff_GetParam('ff_param_print','0'); ?>' == '1') {
        window.print();
        window.close();
    } // if
} // ff_print_init

Upon loading the form in the browser, the browser will now print the window, and then close the window again. We have a little problem solved here: Since FacileForms has a live preview, it would immediately print the current page and the close the browser as soon as we save the settings. We took care by only printing and closing the window when a parameter &ff_param_print was passed in as '1'.

• Save the element settings

Adding the print button to the main form

After the print form is complete, it is now time to add a print button to the main form:

• Add a regular button with title Print Button, name print and label Print
• Go to the Scripts tab
• Change the Action Script to Custom
• Click on Create code framework and confirm the question.
• Change the created code to:

function ff_print_action(element, action)
{
    window.open(
        '{mossite}/index2.php'
            +'?option=com_facileforms'
            +'&ff_name=prt_print_form'
            +'&ff_param_subject='+escape(ff_getElementByName('subject').value)
            +'&ff_param_urgent='+escape(ff_getElementByName('urgent').checked)
            +'&ff_param_message='+escape(ff_getElementByName('message').value)
            +'&ff_param_sendto='+escape(ff_getElementByName('sendto').value)
            +'&ff_param_print=1',
        'Print',
        'dependent'
    );
} // ff_print_action

We use index2.php in the URL instead of the usual index.php, since we dont want to show the whole page with the template, but only the plain content, our print form.

• Save the element settings

Check it out, now everything should be working.

Questions and comments

Please use this forum thread for questions and comments.