包含用户输入的Javascript打印网页表单 [英] Javascript print web form with user input included

问题描述

我有一个简单的HTML Web表单，我希望用户填写并打印。

我发现了一个类似的问题，用Javascript显示如何在页面上打印特定内容：

接受的答案确实打印了div内的内容。但是，它不打印该表单的任何用户输入。它只是打印一个没有输入的空白​​表单。这是我的例子

 < div id =print-content>< form> 
< table width =100％> 
< tbody> 
< tr> 
< td>< label>名字< / label>< / td> 
< td>< input name =First Namemaxlength =255type =text/>< / td> 
< / tr> 
< tr> 
< td>< label>姓氏< / label>< / td> 
< td><输入名称=姓氏maxlength =255type =text/>< / td> 
< / tr> 
< tr> 
< td><标签>街道地址< / label>< / td> 
< td><输入名称=街道地址maxlength =255type =text/>< / td> 
< / tr> 
< tr> 
< td>< label>城市< / label>< / td> 
< td>< input name =Citymaxlength =255type =text/>< / td> 
< / tr> 
< tr> 
< td>< label>状态< / label>< / td> 
< td>< input name =Statemaxlength =255type =text/>< / td> 
< / tr> 
< tr> 
< td><标签>邮政编码< / label>< / td> 
< td>< input name =Zip Codemaxlength =255type =text/>< / td> 
< / tr> 
< tr> 
< td><标签>电话号码< / label>< / td> 
< td>< input name =Phone Numbermaxlength =255type =text/>< / td> 
< / tr> 
< tr> 
< td><标签>电子邮件地址< / label>< / td> 
< td>< input name =Email Addressmaxlength =255type =text/>< / td> 
< / tr> 
< tr> 
< td colspan =2>< label>要服务的项目描述< / label>< br />< textarea name =Itemstype =text >< / textarea的>< / TD> 
< / tr> 
< tr> 
< td colspan =2>< label>问题描述< / label>< br />< textarea name =Problemstype =text> < / textarea的>< / TD> 
< / tr> 
< tr> 
< td colspan =2>< label>任何特别提示< / label>< br />< textarea name =Notes type =text => textarea的>< / TD> 
< / tr> 
< / tbody> 
< / table> 
< input type =buttononclick =printDiv（'print-content'）value =打印div！ />< /形式>< / DIV> 
 
 
< script type =text / javascript> //<！[CDATA [
 function printDiv（divName）{
 alert这里打印此表格'）; 
 var printContents = document.getElementById（divName）.innerHTML; 
 w = window.open（）; 
 w.document.write（printContents）; 
 w.print（）; 
 w.close（）; 
} 
 //]]>< / script> 
  

有关如何更改此脚本的任何想法，以便它还将在表单中打印用户输入？谢谢！

解决方案

我重新创建了您发布的链接中的代码并进行了一些更改，基本上它抓取了所有输入名称，值并重新创建一个表来打印它们，即：

 < div id =print-content>< form> ; 
< table width =100％> 
< tbody> 
< tr> 
< td>< label>名字< / label>< / td> 
< td>< input name =First Namemaxlength =255type =text/>< / td> 
< / tr> 
< tr> 
< td>< label>姓氏< / label>< / td> 
< td><输入名称=姓氏maxlength =255type =text/>< / td> 
< / tr> 
< tr> 
< td><标签>街道地址< / label>< / td> 
< td><输入名称=街道地址maxlength =255type =text/>< / td> 
< / tr> 
< tr> 
< td>< label>城市< / label>< / td> 
< td>< input name =Citymaxlength =255type =text/>< / td> 
< / tr> 
< tr> 
< td>< label>状态< / label>< / td> 
< td>< input name =Statemaxlength =255type =text/>< / td> 
< / tr> 
< tr> 
< td><标签>邮政编码< / label>< / td> 
< td>< input name =Zip Codemaxlength =255type =text/>< / td> 
< / tr> 
< tr> 
< td><标签>电话号码< / label>< / td> 
< td>< input name =Phone Numbermaxlength =255type =text/>< / td> 
< / tr> 
< tr> 
< td><标签>电子邮件地址< / label>< / td> 
< td>< input name =Email Addressmaxlength =255type =text/>< / td> 
< / tr> 
< tr> 
< td colspan =2>< label>要服务的项目描述< / label>< br />< textarea name =Itemstype =text >< / textarea的>< / TD> 
< / tr> 
< tr> 
< td colspan =2>< label>问题描述< / label>< br />< textarea name =Problemstype =text> < / textarea的>< / TD> 
< / tr> 
< tr> 
< td colspan =2>< label>任何特别提示< / label>< br />< textarea name =Notes type =text => textarea的>< / TD> 
< / tr> 
< / tbody> 
< / table> 
< input type =buttononclick =printDiv（'print-table'）value =打印一个div！ />< /形式>< / DIV> 
 
< / div> 
 
< script> 
函数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; //如果你有更多的标签记住改变这个值
 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

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!

解决方案

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

这篇关于包含用户输入的Javascript打印网页表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！