Jquery to print after submit the form

Question

I want to use jquery to print and here i have a button to perform this taxk but I want this to be printed after the form submission.

here is my code that prints the content on button click event, after printing ti will submit the form.. how can i do this..

<button  id="btnjson" type="submit" value="ok" class="button" onclick="printDiv('print-table')">Ok</button>



<script>
function printDiv(divName) {
 //alert('s');
 var printContents = '<div id="print-content"><form><table width="100%"  height="100" ><tbody >';
  var inputs, index;
inputs = document.querySelectorAll('input,select');
printContents+='<div style="width:765px; float:left; height:72px;">'
printContents +='</tbody></table>';
 w=window.open();
 w.document.write(printContents);
 w.print();
 w.close();
}
</script>

Print where? on console ? or on UI? do you want to stop the screen before submission? — yeppe, Oct 31 '18 at 05:23
if submit is done then it will be print if have any problem in submit like validations and all than it will not print — monika choudhary, Oct 31 '18 at 05:28
i cant do this bcoz this button related to my form submission — monika choudhary, Oct 31 '18 at 05:39
remove unwanted comments @manika and put a green tick if you feel the question is answered correctly by someone. — yeppe, Nov 02 '18 at 05:00

score 1 · Answer 1 · answered Oct 31 '18 at 05:29

1

You can do in 2 ways.

1- can generate a screenshot using canvas

2- you may use jquery to hide elements and get print done before form submission

answered Oct 31 '18 at 05:29

Naveed Ramzan

3,565
3
25
30

WC2 · Accepted Answer · 2018-10-31T07:50:26.417

1

How I did for printing invoices after successful response from backend is follows:

var mywindow = window.open('_blank', '', '');
mywindow.document.write('<html><head></head><body onload="setTimeout(myFunction(){window.print();}, 3000)">');  
var printContents = '<style>@media print {  .print_hide{display: none;} } </style>';
printContents += '<div id="print-content"><form><table width="100%" height="100"><tbody>';
var inputs, index; inputs = document.querySelectorAll('input,select'); 
printContents+='<div style="width:765px; float:left; height:72px;">';
printContents +='</tbody></table>';
mywindow.document.write(printContents);
mywindow.document.write('</body></html>');                        
mywindow.document.close();

It will open a new window...

edited Oct 31 '18 at 07:50

answered Oct 31 '18 at 06:23

WC2

317
1
9

hey i also dont want everything in print in this i use selected inputs for printing – monika choudhary Oct 31 '18 at 06:26
For specific content printing use CSS with ".print_hide" class and apply to ignored ones.....also add @media print { .print_hide{display: none;} } in CSS – WC2 Oct 31 '18 at 06:44
i cant understand what u want to say – monika choudhary Oct 31 '18 at 06:48
var printContents = '
'; var inputs, index; inputs = document.querySelectorAll('input,select'); printContents+='
'; printContents +='
';
– monika choudhary Oct 31 '18 at 07:13
because i write css also hear for every values postion on page – monika choudhary Oct 31 '18 at 07:14
var printContents = ''; printContents += '
';
– WC2 Oct 31 '18 at 07:25
apply print hide class to ignored elements. – WC2 Oct 31 '18 at 07:27
hey its move me on a page – monika choudhary Oct 31 '18 at 08:03
that is looking weird and also through on blank – monika choudhary Oct 31 '18 at 08:03
on current tab its not happning?? – monika choudhary Oct 31 '18 at 08:04
i want a page in same window – monika choudhary Oct 31 '18 at 08:06
Try editing ur self ...it will improve ur skills ....Here most of the people will guide u d way ...rest u have to code ur self....sorry. – WC2 Oct 31 '18 at 08:07
my previous is better but a little bit problem that i wanted to fix out – monika choudhary Oct 31 '18 at 08:10

score 0 · Answer 3 · answered Oct 31 '18 at 05:27

0

Nothing can be printed after job submission, you may have to send the data to be back-end and store it and then retrieve it. Using Session scope variables etc.

answered Oct 31 '18 at 05:27

yeppe

679
1
11
43

Jquery to print after submit the form

3 Answers3