Textbox is not getting printed from a Dialog box in Javascript/Asp.net

Question

I am trying to print a dialog box. I am able to print everything from the dialog box except the Textbox values.

HTML

<div class="calculator">
 <a href="#" onclick="printElement('.calculator')">
   <img src="images/icon_print.png" /> Print
 </a>
</div>

JS

function printElement(element) {
    var text = document.getElementById("age_input").value;
    alert(text);
    w = window.open();
    w.document.write($(element).html());
    w.document.close();
    document.getElementById("age_input").value = text;
    w.print();

    w.close();
}

How do I print the dialog with the values in the Textbox elements included?

document.write: stackoverflow.com/questions/802854/…

user3277192
– user3277192

2016-05-18 01:14:33 +00:00
Commented May 18, 2016 at 1:14 — user3277192
– user3277192, Commented May 18, 2016 at 1:14

Pang · Accepted Answer · 2018-06-27 02:22:46Z

1

Good question. It took me a while to figure it out. The issue is that the content of the text box is not part of HTML when you use $(element).html()

You can see this by inspecting the element by any browser dev tools (F12). Therefore you must make your content part of HTML to make them available during print. A quick workaround is to use placeholder attribute of the input box. Here's an updated version of your code.

<script type="text/javascript">
     function printElement(element) {
         var text = document.getElementById("age_input").value;
         document.getElementById("age_input").placeholder = text;
         w = window.open();
         w.document.write('<html><head><title>DIV Contents</title>');
         w.document.write('</head><body >');
         w.document.write($(element).html());
         w.document.write('</body></html>');
         w.document.close();
         document.getElementById("age_input").value = text;
         w.print();

         w.close();
     } 
 </script>

I assume age_input is your input box and it's within the Div element

<div class="calculator">
        <input id="age_input" type="text" />
 <a href="#" onclick="printElement('.calculator')"> <img src="images/icon_print.png" />Print</a>
 </div>

edited Jun 27, 2018 at 2:22

Pang

10.2k146 gold badges87 silver badges126 bronze badges

answered May 18, 2016 at 0:22

Sam

2,9251 gold badge17 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nalini Over a year ago

Thank you very much Sam, your solution did work! Cheers :)

Collectives™ on Stack Overflow

Textbox is not getting printed from a Dialog box in Javascript/Asp.net

HTML

JS

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

HTML

JS

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related