Jquery to print after submit the form
up vote
0
down vote
favorite
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>
javascript jquery css html5
|
show 6 more comments
up vote
0
down vote
favorite
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>
javascript jquery css html5
Print where? on console ? or on UI? do you want to stop the screen before submission?
– yeppe
Oct 31 at 5:23
yes i want to stop screen before submission
– monika choudhary
Oct 31 at 5:27
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 at 5:28
hey @Gulshan how could it works
– monika choudhary
Oct 31 at 5:34
i cant do this bcoz this button related to my form submission
– monika choudhary
Oct 31 at 5:39
|
show 6 more comments
up vote
0
down vote
favorite
up vote
0
down vote
favorite
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>
javascript jquery css html5
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>
<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>
<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>
javascript jquery css html5
javascript jquery css html5
edited Nov 9 at 11:03
asked Oct 31 at 5:20
monika choudhary
368
368
Print where? on console ? or on UI? do you want to stop the screen before submission?
– yeppe
Oct 31 at 5:23
yes i want to stop screen before submission
– monika choudhary
Oct 31 at 5:27
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 at 5:28
hey @Gulshan how could it works
– monika choudhary
Oct 31 at 5:34
i cant do this bcoz this button related to my form submission
– monika choudhary
Oct 31 at 5:39
|
show 6 more comments
Print where? on console ? or on UI? do you want to stop the screen before submission?
– yeppe
Oct 31 at 5:23
yes i want to stop screen before submission
– monika choudhary
Oct 31 at 5:27
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 at 5:28
hey @Gulshan how could it works
– monika choudhary
Oct 31 at 5:34
i cant do this bcoz this button related to my form submission
– monika choudhary
Oct 31 at 5:39
Print where? on console ? or on UI? do you want to stop the screen before submission?
– yeppe
Oct 31 at 5:23
Print where? on console ? or on UI? do you want to stop the screen before submission?
– yeppe
Oct 31 at 5:23
yes i want to stop screen before submission
– monika choudhary
Oct 31 at 5:27
yes i want to stop screen before submission
– monika choudhary
Oct 31 at 5:27
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 at 5:28
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 at 5:28
hey @Gulshan how could it works
– monika choudhary
Oct 31 at 5:34
hey @Gulshan how could it works
– monika choudhary
Oct 31 at 5:34
i cant do this bcoz this button related to my form submission
– monika choudhary
Oct 31 at 5:39
i cant do this bcoz this button related to my form submission
– monika choudhary
Oct 31 at 5:39
|
show 6 more comments
3 Answers
3
active
oldest
votes
up vote
1
down vote
accepted
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...
hey i also dont want everything in print in this i use selected inputs for printing
– monika choudhary
Oct 31 at 6:26
can u see my code
– monika choudhary
Oct 31 at 6:43
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 at 6:44
i cant understand what u want to say
– monika choudhary
Oct 31 at 6:48
jsfiddle.net/yw2s5k0g/1 ... please refer this
– WC2
Oct 31 at 7:01
|
show 18 more comments
up vote
1
down vote
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
good one Naveed.
– yeppe
Oct 31 at 5:33
add a comment |
up vote
0
down vote
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.
add a comment |
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
1
down vote
accepted
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...
hey i also dont want everything in print in this i use selected inputs for printing
– monika choudhary
Oct 31 at 6:26
can u see my code
– monika choudhary
Oct 31 at 6:43
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 at 6:44
i cant understand what u want to say
– monika choudhary
Oct 31 at 6:48
jsfiddle.net/yw2s5k0g/1 ... please refer this
– WC2
Oct 31 at 7:01
|
show 18 more comments
up vote
1
down vote
accepted
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...
hey i also dont want everything in print in this i use selected inputs for printing
– monika choudhary
Oct 31 at 6:26
can u see my code
– monika choudhary
Oct 31 at 6:43
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 at 6:44
i cant understand what u want to say
– monika choudhary
Oct 31 at 6:48
jsfiddle.net/yw2s5k0g/1 ... please refer this
– WC2
Oct 31 at 7:01
|
show 18 more comments
up vote
1
down vote
accepted
up vote
1
down vote
accepted
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...
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 at 7:50
answered Oct 31 at 6:23
WC2
1989
1989
hey i also dont want everything in print in this i use selected inputs for printing
– monika choudhary
Oct 31 at 6:26
can u see my code
– monika choudhary
Oct 31 at 6:43
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 at 6:44
i cant understand what u want to say
– monika choudhary
Oct 31 at 6:48
jsfiddle.net/yw2s5k0g/1 ... please refer this
– WC2
Oct 31 at 7:01
|
show 18 more comments
hey i also dont want everything in print in this i use selected inputs for printing
– monika choudhary
Oct 31 at 6:26
can u see my code
– monika choudhary
Oct 31 at 6:43
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 at 6:44
i cant understand what u want to say
– monika choudhary
Oct 31 at 6:48
jsfiddle.net/yw2s5k0g/1 ... please refer this
– WC2
Oct 31 at 7:01
hey i also dont want everything in print in this i use selected inputs for printing
– monika choudhary
Oct 31 at 6:26
hey i also dont want everything in print in this i use selected inputs for printing
– monika choudhary
Oct 31 at 6:26
can u see my code
– monika choudhary
Oct 31 at 6:43
can u see my code
– monika choudhary
Oct 31 at 6:43
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 at 6:44
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 at 6:44
i cant understand what u want to say
– monika choudhary
Oct 31 at 6:48
i cant understand what u want to say
– monika choudhary
Oct 31 at 6:48
jsfiddle.net/yw2s5k0g/1 ... please refer this
– WC2
Oct 31 at 7:01
jsfiddle.net/yw2s5k0g/1 ... please refer this
– WC2
Oct 31 at 7:01
|
show 18 more comments
up vote
1
down vote
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
good one Naveed.
– yeppe
Oct 31 at 5:33
add a comment |
up vote
1
down vote
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
good one Naveed.
– yeppe
Oct 31 at 5:33
add a comment |
up vote
1
down vote
up vote
1
down vote
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
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 at 5:29
Naveed Ramzan
2,59431625
2,59431625
good one Naveed.
– yeppe
Oct 31 at 5:33
add a comment |
good one Naveed.
– yeppe
Oct 31 at 5:33
good one Naveed.
– yeppe
Oct 31 at 5:33
good one Naveed.
– yeppe
Oct 31 at 5:33
add a comment |
up vote
0
down vote
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.
add a comment |
up vote
0
down vote
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.
add a comment |
up vote
0
down vote
up vote
0
down vote
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.
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 at 5:27
yeppe
2991526
2991526
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53076780%2fjquery-to-print-after-submit-the-form%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Print where? on console ? or on UI? do you want to stop the screen before submission?
– yeppe
Oct 31 at 5:23
yes i want to stop screen before submission
– monika choudhary
Oct 31 at 5:27
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 at 5:28
hey @Gulshan how could it works
– monika choudhary
Oct 31 at 5:34
i cant do this bcoz this button related to my form submission
– monika choudhary
Oct 31 at 5:39