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. — user4570983
– user4570983, Commented Apr 23, 2015 at 21:34

Pedro Lobito · Accepted Answer · 2015-04-23 22:00:35Z

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.
@AlexRitter Updated. You may want to style the table a bit more , specifically the table width="30%", but the main code is there.

zfrisch · Accepted Answer · 2015-04-23 22:00:45Z

0

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

edited Apr 23, 2015 at 22:00

answered Apr 23, 2015 at 21:44

zfrisch

8,6901 gold badge26 silver badges39 bronze badges

2 Comments

Alex Ritter Over a year ago

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?

zfrisch Over a year ago

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

StackSlave · Accepted Answer · 2015-04-23 22:08:34Z

0

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

edited Apr 23, 2015 at 22:08

answered Apr 23, 2015 at 21:48

StackSlave

10.6k2 gold badges20 silver badges35 bronze badges

Collectives™ on Stack Overflow

Javascript print web form with user input included

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related