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>












share|improve this question
























  • 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















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>












share|improve this question
























  • 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













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>












share|improve this 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>








<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






share|improve this question















share|improve this question













share|improve this question




share|improve this question








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


















  • 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












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






share|improve this answer























  • 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


















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






share|improve this answer





















  • good one Naveed.
    – yeppe
    Oct 31 at 5:33


















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.






share|improve this answer





















    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


















    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

























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






    share|improve this answer























    • 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















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






    share|improve this answer























    • 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













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






    share|improve this answer














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







    share|improve this answer














    share|improve this answer



    share|improve this answer








    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


















    • 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












    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






    share|improve this answer





















    • good one Naveed.
      – yeppe
      Oct 31 at 5:33















    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






    share|improve this answer





















    • good one Naveed.
      – yeppe
      Oct 31 at 5:33













    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






    share|improve this answer












    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







    share|improve this answer












    share|improve this answer



    share|improve this answer










    answered Oct 31 at 5:29









    Naveed Ramzan

    2,59431625




    2,59431625












    • 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




    good one Naveed.
    – yeppe
    Oct 31 at 5:33










    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.






    share|improve this answer

























      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.






      share|improve this answer























        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.






        share|improve this answer












        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.







        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Oct 31 at 5:27









        yeppe

        2991526




        2991526






























            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














            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





















































            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







            這個網誌中的熱門文章

            Xamarin.form Move up view when keyboard appear

            Post-Redirect-Get with Spring WebFlux and Thymeleaf

            Anylogic : not able to use stopDelay()