You are viewing limited content. For full access, please sign in.

Question

Question

How to add a HTML Print Button inside a form

asked on September 25, 2018 Show version history

I'm having trouble adding a button that prints the entire form.  This is my HTML:

<div>
<input type="button" value="Print this form" onclick="window.print()">
</div>

It creates a button, and it works well, but my form is split up into two sections, and the Print button is on the second section.  When you click the button, it only gives you the option to print the section the button is on.  

I know the HTML is for 'window' print, but I don't know the code to change it to that would print the entire form.

Is this even possible?  Any help or guidance would be greatly appreciated.

Thanks,

Bill

0 0

Replies

replied on December 14, 2018

Below I have some code that worked for me... It makes all the pages active which shows the information, hides the buttons, comes up with the print, removes the active class (hiding all tabs contents), displays the tab (will need to modify the #q80 to which tab you are using), and then shows the buttons again.

  $('#cmdPrint').click(function(){
      // place active on all.
      $('.cf-page').addClass('active');
      
    // Hide the buttons.
    $('.cf-prev-btn').hide();
    $('.cf-next-btn').hide();
      
      // print.
    window.print();
      
    // remove the active on all, except the one we are on.
    $('.cf-page').removeClass('active');
    $('#q80').addClass('active');
   
    // show the buttons again.
    $('.cf-prev-btn').show();
    $('.cf-next-btn').show();    
  });

 

And this was the HTML for the button.

<button id="cmdPrint" type="button">Print</button>

1 0
replied on February 12, 2021

Would you be able to detail where the code should be copied to?  Or can it simply be pasted to the bottom of the HTML screen.  Also what value should I use for the "#q80", or where would I find out that value?  I am also trying to implement a print button, but the form has multiple tabs.

0 0
replied on September 25, 2018

When you print the window, hidden fields will not be visible unless displayed before selecting to print. So you would need to call your own javascript that first displays all the hidden information on the other section , then calls window.print()

You could even have your javascript function work through fields rules, by making a field rule to show hide when javascript triggers a hidden trigger field.

With forms 10.3 though, I can no longer use this print method, for some reason it submits the form when you click the print button.

0 0
replied on September 26, 2018

I said it was split between two 'sections', and I should have been more clear.  The form is split by a page break, with two tabs at the top to switch between the two.  No fields are hidden.

I think we are on 10.2, but that is great to know.  Thanks for informing me of this!

0 0
replied on September 26, 2018 Show version history

Hi Bill,

 

You might be able to use JavaScript to move all the fields of a page onto one page when the print button is clicked. This answers post has a very detailed explanation of how to move fields from page to page. You will probably be able to amend this JavaScript to move sections from other pages onto the page with the print button when the print button is clicked. After that, you'll be able to use the window.print() method to print the entire page, now that all the fields have been moved onto one page.

I haven't quite worked out how to move the fields back to their respective pages after printing though, so you may want to look into a solution for that.

 

Another option you have is to handle the creation of a printable copy through the Process Diagram. If the form is the starting form, you can allow the users to print the page after they've submitted the form. In the Process Diagram, you can configure the Message Start Event to show the submitted form and give the users the option to Print it. This will automatically collate all the pages together. 

If the form is a User Task, you can create a second user task which loads automatically if the same person is assigned. The Process Diagram would look something like this

 

This second user task (Printable Form) would display a read only form with the page breaks removed and a "print" button which acts like you've described above. You could even code the print button to also click the submit button and move forward with the process with the below code.

$(document).ready(function() {
  $('.ClickPrint').on('click', function () {
    window.print();
	$('.Submit').click();
  });
});

 

As for @████████'s problem with the print button submitting the form, if you add the type attribute to your button (type="button") it will no longer try to submit the form when the button is clicked. You can read more about that in this Answers post.

 

I hope this helps!

0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.