标签：BMI box 原因 orm 不刷新 lse radio checked 解决
在一个项目中，有一个功能需求
在一个页面上，有一个表单，表单包括textbox, radiobutton, checkbox, textarea等控件
用户填写表单后，按下submit按钮提交表单
现在用户有个需求，他们希望在这个页面上增加一个print按钮或者链接
点击print时，可以打印
最简单的想法就是，加上一个print的链接，然后调用javascript中的window.print()能打印
我最初是这样写代码的
在网页上增加一个print的链接
<a href="javascript:void(0)" onclick="printProduct()"><i class="fa fa-print" aria-hidden="true"></i>Print this page</a>
或者，也可以写成这样
<a href="javascript:printProduct()"><i class="fa fa-print" aria-hidden="true"></i>Print this page</a>
然后，javascript的printProduct方法写成如下
function printProduct() { document.body.innerHTML = document.getElementById("printDiv").innerHTML; window.print(); history.go(0); }
页面上，需要打印的表单写在id=printDiv的div中
实现这个功能后，发现几个问题
1.在页面填写好表单内容后，点击打印按钮时，打印出来的表单内容是空的，没有任何内容
2. 打印完成后，回到网页上，刚才网页上填写的内容，也全部都消失了
为什么会出现这种情况呢，怎么解决呢？
产生这个问题的原因是
$("#form").html()时，没有包含你在网页上填写的数据。 为了解决这个问题，你需要用html()之前，把你在网页上填入表单的所有数据都val(‘‘)先
也就是说，在调用window.print()之前，我们需要一个javascript来bindData
这里，我写了一个bindData的javascript函数
function bindData() { $("input[type=‘text‘],select option").each(function () { $(this).attr(‘value‘, $(this).val()); }); $("input[type=‘radio‘],input[type=‘checkbox‘]").each(function () { if ($(this).attr(‘checked‘)) $(this).attr(‘checked‘, true); else $(this).removeAttr(‘checked‘); }); $("select option").each(function () { if ($(this).attr(‘selected‘)) $(this).attr(‘selected‘, true); else $(this).removeAttr(‘selected‘); }); $(‘textarea‘).each(function () { $(this).html($(this).val()); }); }
这样，把这个javascript函数放在打印之前。上面发生的第1个问题就解决了
我们在看第2个问题，点击打印按钮后，回到网页，发现网页上，你之前填写的内容都没有了
为了解决这个问题，我们采用另一种方式
我们在Javascript代码中，临时创建一个window窗口，然后把你要打印的内容写入这个临时的window窗口，打印完成后，再关闭这个新创建的窗口
代码如下
function printProduct() { bindData(); var printContent = document.getElementById("printDiv").innerHTML; var newWindow = window.open(); newWindow.document.write(printContent); newWindow.print(); newWindow.close(); }
到这里，整个网页表单打印功能就完成了
JavaScript在表单页面添加打印功能，打印表单中的值并打印完成后不刷新页面
标签：BMI box 原因 orm 不刷新 lse radio checked 解决
原文地址：https://www.cnblogs.com/wphl-27/p/12175456.html
