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>

edited Nov 9 at 11:03

asked Oct 31 at 5:20

monika choudhary

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

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>

edited Nov 9 at 11:03

asked Oct 31 at 5:20

monika choudhary

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

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>

edited Nov 9 at 11:03

asked Oct 31 at 5:20

monika choudhary

368

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

edited Nov 9 at 11:03

asked Oct 31 at 5:20

monika choudhary

368

edited Nov 9 at 11:03

asked Oct 31 at 5:20

monika choudhary

368

edited Nov 9 at 11:03

asked Oct 31 at 5:20

monika choudhary

368

asked Oct 31 at 5:20

monika choudhary

368

asked Oct 31 at 5:20

monika choudhary

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

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

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...

edited Oct 31 at 7:50

answered Oct 31 at 6:23

WC2

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

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

answered Oct 31 at 5:29

Naveed Ramzan

2,59431625

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.

answered Oct 31 at 5:27

yeppe

2991526

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

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

Name

Required, but never shown

3 Answers
3

active

oldest

votes

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...

edited Oct 31 at 7:50

answered Oct 31 at 6:23

WC2

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

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...

edited Oct 31 at 7:50

answered Oct 31 at 6:23

WC2

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

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...

edited Oct 31 at 7:50

answered Oct 31 at 6:23

WC2

1989

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

edited Oct 31 at 7:50

answered Oct 31 at 6:23

WC2

1989

answered Oct 31 at 6:23

WC2

1989

answered Oct 31 at 6:23

WC2

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

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

answered Oct 31 at 5:29

Naveed Ramzan

2,59431625

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

answered Oct 31 at 5:29

Naveed Ramzan

2,59431625

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

answered Oct 31 at 5:29

Naveed Ramzan

2,59431625

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

answered Oct 31 at 5:29

Naveed Ramzan

2,59431625

answered Oct 31 at 5:29

Naveed Ramzan

2,59431625

answered Oct 31 at 5:29

Naveed Ramzan

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

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.

answered Oct 31 at 5:27

yeppe

2991526

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.

answered Oct 31 at 5:27

yeppe

2991526

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.

answered Oct 31 at 5:27

yeppe

2991526

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

answered Oct 31 at 5:27

yeppe

2991526

answered Oct 31 at 5:27

yeppe

2991526

answered Oct 31 at 5:27

yeppe

2991526

add a comment |

draft saved

draft discarded

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.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Wsrtjtyk