我如何打印一个HTML表单及其内容 [英] how do I print a html form along with its contents
本文介绍了我如何打印一个HTML表单及其内容的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我用按钮打印表单并进行创建。表单被打印但没有用户输入显示。有什么方法可以包含用户输入？
<！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Transitional // ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
< html xmlns =http://www.w3.org/1999/xhtml><！ - InstanceBegin template =/ Templates / Template_plain.dwtcodeOutsideHTMLIsLocked =false - > ;
< head>
<！ - 这个代码从stackoverflow http://stackoverflow.com/questions/2255291/print-the-contents-of-a-div - >
< script type =text / javascriptsrc =http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js> < /脚本>
< script type =text / javascript>
PrintElem（elem）
{
Popup（$（elem）.html（））;
函数Popup（data）
{
var mywindow = window.open（''，'my div'，'height = 400，width = 600 ）;
mywindow.document.write（'< html>< head>< title>我的div< / title>'）;
/ *可选样式表* / //mywindow.document.write('<link rel =stylesheethref =main.csstype =text / css/>'）;
mywindow.document.write（'< / head>< body>'）;
mywindow.document.write（data）;
mywindow.document.write（'< / body>< / html>'）;
mywindow.document.close（）; //必须为IE> = 10
mywindow.focus（）; //必须为IE> = 10
mywindow.print（）;
mywindow.close（）;
返回true;
}
< / script>
<！ - 从堆栈溢出结束代码 - >
< / style>< / head>
< body>
< p>填写此表格< / p>
< div id =containerstyle =border：2px solid; width：600px; padding：5px;>
< form>
名称：< br />
< input type =textname =F_Namesize = 60>
< br />< br />
街道地址：< br />
< input type =textname =F_Addresssize = 30>
城市：
< input type =textname =F_Citysize = 12>
州：
< input type =textname =F_Statesize = 2>
邮编：
< br />< br />
< input type =resetvalue =Reset>
< br />< br />
< / form>
< ！ - end #container - >
< / div><！ - end #container - >
< input type =buttonvalue =打印表单onclick =PrintElem（'＃container'）/>
< / body>
< / html>
解决方案动态类型值不是
.html（）会得到你。（这归结于属性和属性之间的区别。）
<但是，您可以使用类似下面的内容将每个输入字段的值属性设置为其当前值：$（'form input [type = text]'）。each（function（）{
$（this）.attr（'value' ，$（this）.val（））;
}）;
- 然后
jsfiddle.net/b39xpoou/rel =nofollow> http://jsfiddle.net/b39xpoou/ （简单示例，使用div元素输出HTML，仅使用文本输入字段，但应该是很容易适应/修改。）.html（）也可以帮助您。I made and form along with a button to print the form. The form gets printed BUT none of the user input shows up. Is there some way to include the user input?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/Template_plain.dwt" codeOutsideHTMLIsLocked="false" --> <head> <!-- this code from stackoverflow http://stackoverflow.com/questions/2255291/print-the-contents-of-a-div --> <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js" > </script> <script type="text/javascript"> function PrintElem(elem) { Popup($(elem).html()); } function Popup(data) { var mywindow = window.open('', 'my div', 'height=400,width=600'); mywindow.document.write('<html><head><title>my div</title>'); /*optional stylesheet*/ //mywindow.document.write('<link rel="stylesheet" href="main.css" type="text/css" />'); mywindow.document.write('</head><body >'); mywindow.document.write(data); mywindow.document.write('</body></html>'); mywindow.document.close(); // necessary for IE >= 10 mywindow.focus(); // necessary for IE >= 10 mywindow.print(); mywindow.close(); return true; } </script> <!-- end code from stack overflow --> </style></head> <body> <p>Complete this form</p> <div id="container" style="border: 2px solid; width: 600px; padding: 5px;"> <form> Name:<br/> <input type="text" name="F_Name" size=60> <br/><br/> Street Address:<br/> <input type="text" name="F_Address" size=30> City: <input type="text" name="F_City" size=12> State: <input type="text" name="F_State" size=2> Zip Code: <input type="text" name="F_ZipCode" size=5"> <br/><br/> <input type="reset" value="Reset"> <br/><br/> </form> <!-- end #container --> </div> <!-- end #container --> <input type="button" value="Print Form" onclick="PrintElem('#container')" /> </body> </html>
解决方案Dynamically typed values are not part of what
.html()gets you. (This comes down to the difference between properties and attributes.)You can however set the
valueattribute of each input field to its current value, using something like this:$('form input[type=text]').each(function() { $(this).attr('value', $(this).val()); });– then
.html()would get you those as well.http://jsfiddle.net/b39xpoou/ (Simplified example, using a div element to output the HTML, using only text input fields, … but should be easy enough to adapt/modify.)
这篇关于我如何打印一个HTML表单及其内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
