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!

Answer 1

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

Answer 2

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();
}

Answer 3

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