Javascript print web form with user input included

Question

I have a simple HTML web form that I would like to have users fill out and then print.

I have found a similar question that showed with Javascript how to print specific content on a page here: How can I insert a Print button that prints a form in a webpage

The accepted answer does indeed print the content inside the div. However, it is not printing any user input for the form. It simply prints a blank form with no input. Here is my example

<div id="print-content"><form>
<table width="100%">
<tbody>
<tr>
<td><label>First Name</label></td>
<td><input name="First Name" maxlength="255" type="text" /></td>
</tr>
<tr>
<td><label>Last Name</label></td>
<td><input name="Last Name" maxlength="255" type="text" /></td>
</tr>
<tr>
<td><label>Street Address</label></td>
<td><input name="Street Address" maxlength="255" type="text" /></td>
</tr>
<tr>
<td><label>City</label></td>
<td><input name="City" maxlength="255" type="text" /></td>
</tr>
<tr>
<td><label>State</label></td>
<td><input name="State" maxlength="255" type="text" /></td>
</tr>
<tr>
<td><label>Zip Code</label></td>
<td><input name="Zip Code" maxlength="255" type="text" /></td>
</tr>
<tr>
<td><label>Phone Number</label></td>
<td><input name="Phone Number" maxlength="255" type="text" /></td>
</tr>
<tr>
<td><label>E-Mail Address</label></td>
<td><input name="Email Address" maxlength="255" type="text" /></td>
</tr>
<tr>
<td colspan="2"><label>Description of item(s) to be serviced</label><br /><textarea name="Items" type="text"></textarea></td>
</tr>
<tr>
<td colspan="2"><label>Description of Problem(s)</label><br /><textarea name="Problems" type="text"></textarea></td>
</tr>
<tr>
<td colspan="2"><label>Any Special Notes</label><br /><textarea name="Notes type=" text=""></textarea></td>
</tr>
</tbody>
</table>
<input type="button" onclick="printDiv('print-content')" value="print a div!" /></form></div>


<script type="text/javascript">// <![CDATA[
function printDiv(divName) {
 alert('Click Here To Print This Form');
 var printContents = document.getElementById(divName).innerHTML;
 w=window.open();
 w.document.write(printContents);
 w.print();
 w.close();
}
// ]]></script>

Any thoughts on how to change this script so it will also print the user input within the form? Thanks!

If you can't find a way to print the text boxes with the input in them, one workaround is to use a `for` loop to replace each input element with the input element's value and adding CSS styling to it to put a box around it. — , Apr 23 '15 at 21:34

Pedro Lobito · Accepted Answer · 2015-04-23T22:00:35.397

I've recreated the code from the link you posted with some changes, basically it grabs all the input names and values and recreate a table to print them, i.e.:

<div id="print-content"><form>
<table width="100%">
<tbody>
<tr>
<td><label>First Name</label></td>
<td><input name="First Name" maxlength="255" type="text" /></td>
</tr>
<tr>
<td><label>Last Name</label></td>
<td><input name="Last Name" maxlength="255" type="text" /></td>
</tr>
<tr>
<td><label>Street Address</label></td>
<td><input name="Street Address" maxlength="255" type="text" /></td>
</tr>
<tr>
<td><label>City</label></td>
<td><input name="City" maxlength="255" type="text" /></td>
</tr>
<tr>
<td><label>State</label></td>
<td><input name="State" maxlength="255" type="text" /></td>
</tr>
<tr>
<td><label>Zip Code</label></td>
<td><input name="Zip Code" maxlength="255" type="text" /></td>
</tr>
<tr>
<td><label>Phone Number</label></td>
<td><input name="Phone Number" maxlength="255" type="text" /></td>
</tr>
<tr>
<td><label>E-Mail Address</label></td>
<td><input name="Email Address" maxlength="255" type="text" /></td>
</tr>
<tr>
<td colspan="2"><label>Description of item(s) to be serviced</label><br /><textarea name="Items" type="text"></textarea></td>
</tr>
<tr>
<td colspan="2"><label>Description of Problem(s)</label><br /><textarea name="Problems" type="text"></textarea></td>
</tr>
<tr>
<td colspan="2"><label>Any Special Notes</label><br /><textarea name="Notes type=" text=""></textarea></td>
</tr>
</tbody>
</table>
<input type="button" onclick="printDiv('print-table')" value="print a div!" /></form></div>

</div>

<script>
function printDiv(divName) {
 //alert('s');
 var printContents = '<div id="print-content"><form><table width="30%"><tbody>';
  var inputs, index;

inputs = document.getElementsByTagName('input');
for (index = 0; index < inputs.length - 1; ++index) {

   var fieldName = inputs[index].name;
   var fieldValue = inputs[index].value;

  printContents +='<tr><td><label>'+fieldName+'</label></td>';
  printContents +='<td>'+fieldValue+'</td></tr>';
}

var z = 8; // if you had more labels remeber to change this value 
inputs = document.getElementsByTagName('textarea');
for (index = 0; index < inputs.length; ++index) {

   //var fieldName = inputs[index].name;
    var fieldName = document.getElementsByTagName('label')[z].textContent;
   var fieldValue = inputs[index].value;

  printContents +='<tr><td colspan="2"><label>'+fieldName+'</label><br>'+fieldValue+'</td></tr>';
++z;
}

   printContents +='</tbody></table>';

 w=window.open();
 w.document.write(printContents);
 w.print();
 w.close();
}
</script>

CODEPEN DEMO

This looks great @Pedro Lobito, but it doesnt seem to be printing the text areas. — Alex Ritter, Apr 23 '15 at 21:48
@AlexRitter Updated. You may want to style the table a bit more , specifically the `table width="30%"`, but the main code is there. — Pedro Lobito, Apr 23 '15 at 22:01

zfrisch · Answer 2 · 2015-04-23T22:00:45.960

Here's a fiddle: http://jsfiddle.net/wqf7e07u/1/

function printDiv(divName) {
var inputContents;
alert('Click Here To Print This Form');
inputContents = "";
var input = document.getElementsByTagName("input");
for (i = 0; i < (input.length -1); i++) {
// notice that it's input.length -1, because we don't want the 
// submit button's value to display. 

    inputContents += input[i].name + ": " + input[i].value + "\n";
}
var input = document.getElementsByTagName("textarea");
 for (i = 0; i < (input.length -1); i++) {
    inputContents += input[i].name + " " + input[i].value + "\n";
}
alert(inputContents);
var printContents = document.getElementById(divName).innerHTML;
}

Keep in mind this just demonstrates how to get the input. When you hit the print button it will display the field names and the text.

I couldn't use .print when I was testing it so I removed the option and I couldn't use document.write due to jsfiddle's security.

however, to put this together:

 function printDiv(divName) {
 var inputContents = "";
 alert('Click Here To Print This Form');

// loop through all input elements and get their values, place
// them in inputcontents, with name and value, one on each line.

var input = document.getElementsByTagName("input");
for (i = 0; i < (input.length -1); i++) {
    inputContents += input[i].name + ": " + input[i].value + "\n";
}

// loop through all textarea elements and get their values, place
// them in inputcontents, with name and value, one on each line.

var input = document.getElementsByTagName("textarea");
 for (i = 0; i < (input.length -1); i++) {
    inputContents += input[i].name + ": " + input[i].value + "\n";
}

var printContents = inputContents;
w=window.open();
w.document.write(printContents);
w.print();
w.close();
}

Hmm. This script is printing the user entered content above the form, and then also printing a blank form. Why would that be? Should I take the form out of the print div? — Alex Ritter, Apr 23 '15 at 21:51
@AlexRitter Just edited. You're exactly right. I didn't know if you wanted to keep the whole form on there or not, but I took it out. It should now just print the input contents. — zfrisch, Apr 23 '15 at 22:01

StackSlave · Answer 3 · 2015-04-23T22:08:34.600

@media print{} or @import 'media.css' print; may be your friend in this case. The other option, since you have CORS access, would be to put your form on a separate page by itself then use an iframe on the page you want to see it, referring to:

var fr = frames[0], iframeWin = fr.contentWindow || fr.contentDocument.defalutView;
iframeWin.print();

Otherwise, the form would have to take up the entire page, as everything else will print. Of course, if you are not really talking about printing, but just rendering user input on the page we've seen no JavaScript effort on your part to attempt that.

Javascript print web form with user input included

3 Answers3

Linked