Published on
The Joomla! Print button is a convenient way to print out articles. Unfortunately it doesn't print out the contents of any form embedded in an article and so isn't very useful for ChronoForms.
Here is one alternative way of allowing users to print out the results of a form submission.
You need to have the results laid out in a printable format. The simplest way to do that is to use the ChronoForms Thank You Page action and add HTML using the curly brackets {input_name} syntax where you want to include the form results.
If you want to generate a 'quick' thank you page then add an Email action if you don't already have one and use the Generate Auto Template button on the Template tab. Then copy and paste the generated template HTML into your Thank You Page action. You'll probably need to edit it to tidy up the HTML but it's quicker than starting from scratch. (You can delete the Email action afterwards if you don't need it.)
In the Thank You Page HTML wrap the section that you want to print in div tags:
<div id='print_div'> . . . </div>
Add this button code to the page where you want the button to appear (probably outside the 'print_me' div).
<input type="button" value="Print" id='print_button' style='visibility: hidden;'></input>
Note that the button is invisible if the User doesn't have JavaScript enabled so that they don't see a print button that they can't use.
Add a Custom Code action to the On Submit event and add one of these two code snippets to it.
Add a Custom Code action to the On Submit event and add one of these two code snippets to it.
Code for ChronoForms v4 using MooTools
<?php
$doc =& JFactory::getDocument();
$script = "
function printPage()
{
var html, css, csss_file, printWin;
css = \"\";
css = \"<style type='text/css'>\"+css+\"</style>\";
css_url = '';
if ( css_url !== '' ) {
css_url = \"<link rel='stylesheet' type='text/css' href='\"+css_url+\"' media='print' />\";
}
html = '<html><head>'+css+css_url+'</head>'+$(id).innerHTML+'</html>';
printWin = window.open('', '', 'left=100, top=100, width=600, height=400, toolbar=0, scrollbars=0, status=0' );
printWin.document.write(html);
printWin.document.close();
printWin.focus();
printWin.print();
printWin.close();
}
var id;
window.addEvent('domready', function() {
id = 'print_div';
$('print_button').setStyle('visibility', 'visible');
$('print_button').addEvent('click', printPage);
});
";
$doc->addScriptDeclaration($script);
?>
Code for ChronoForms v5 using jQuery
<?php
$jdoc = \JFactory::getDocument();
$script = "
jQuery(document).ready(function(jQ){
function printPage()
{
var html, css, csss_file, printWin;
css = \"\";
css = \"<style type='text/css'>\"+css+\"</style>\";
css_url = '';
if ( css_url !== '' ) {
css_url = \"<link rel='stylesheet' type='text/css' href='\"+css_url+\"' media='print' />\";
}
html = '<html><head>'+css+css_url+'</head>'+jQ(id).html()+'</html>';
printWin = window.open('', '', 'left=100, top=100, width=600, height=400, toolbar=0, scrollbars=0, status=0' );
printWin.document.write(html);
printWin.document.close();
printWin.focus();
printWin.print();
printWin.close();
}
var id;
id = '#print_div';
jQ('#print_button').css('visibility', 'visible');
jQ('#print_button').click(printPage);
});
";
$jdoc->addScriptDeclaration($script);
?>
Notes:
The code allows for you to add CSS styling by linking to a CSS file or adding some CSS directly to the css = \"\"; line.
If you prefer an image instead of a print button use an input like this:
<input type='image' src='media/system/images/printButton.png' id='print_button' />
Printing from the OnLoad event
You can adapt this code to print directly from the form page itself. However form inputs generally don't print very well so to get a neat output you need to use JavaScript to copy the results into a hidden 'print div' containing a print page template. This is similar to the HTML used on the Thank You Page above except that you need to add JavaScript to copy the current values from the form inputs into the template. One way of doing this is to add spans in the template:
Some text <span id='input_id_print'></span> some more text
and then use JavaScript to copy the values, for example:
$('input_id_print').set('text', $('input_id').value);
Note that more complex script may be needed to copy the labels from Select drop-downs and Radio Button or CheckBox Groups if the values aren't meaningful in the print version.
Comments: