js打印form表单填写的数据
项⽬中有个打印功能，要求⽤户填写数据后，点击打印，则把表单的内容打印出来，发现调⽤window.print()进⾏打印时，填写的数据没有获取到，原因就是$("#form").html()时，没包含有填写的数据，为了解决这问题，应该html()之前，把所有填写的数据都val('XX')先。在这记录下。
⽐如例⼦刚开始如下
<html>
<head>
<script src="jquery-1.8.3.min.js"></script>
<title>XXXXXX</title>
</head>
<body>
<center>
不⽤打印:aaaaaaaaaaaaa<br/><br/>
<form id="form">
XXXXXX资料<br/><br/>
⽤户名:<input type="text" /><br/>
性别:<input type="radio"  name="sex" value='1' checked />男<input type="radio"  name="sex" value='1'  />⼥
</form>
<br/><br/>
按钮不打印<br/><br/>
<input type="button" οnclick="doPrint()" value="打印" />
</center>
<br/>
</body>
<script type="text/javascript">
function doPrint(){
//备份body
var body = window.document.body.innerHTML;
//备份title
var title = ElementsByTagName('title')[0].innerHTML;
//获取要打印的内容
jquery字符串截取
var form = $("#form").html();
window.document.body.innerHTML = form;
/
/调⽤window的打印功能
window.print();
//恢复原内容
window.document.body.innerHTML = body;
}
</script>
</html>
数据没了，打印后或取消打印，回到原页⾯，数据也是没了。为了解决这问题，要绑定数据
<html>
<head>
<script src="jquery-1.8.3.min.js"></script>
<title>XXXXXX</title>
</head>
<body>
<center>
不⽤打印:aaaaaaaaaaaaa<br/><br/>
<form id="form">
XXXXXX资料<br/><br/>
⽤户名:<input type="text" /><br/>
性别:<input type="radio"  name="sex" value='1' checked />男<input type="radio"  name="sex" value='1'  />⼥
</form>
<br/><br/>
按钮不打印<br/><br/>
<input type="button" οnclick="doPrint()" value="打印" />
</center>
<br/>
</body>
<script type="text/javascript">
function doPrint(){
//绑定数据
bindData()
//备份body
var body = window.document.body.innerHTML;
//备份title
var title = ElementsByTagName('title')[0].innerHTML;
/
/获取要打印的内容
var form = $("#form").html();
window.document.body.innerHTML = form;
//调⽤window的打印功能
window.print();
//恢复原内容
window.document.body.innerHTML = body;
}
//将表单中⼿动填写的数据进⾏绑定，便于html()的时候获取到
function bindData(){
//搞定 type=text, 同时如果checkbox,radio,select>option的值有变化, 也绑定⼀下, 这⾥忽略button  $("input,select option").each(function(){
$(this).attr('value',$(this).val());
});
//搞定 type=checkbox,type=radio 选中状态
$("input[type='checkbox'],input[type='radio']").each(function(){
if($(this).attr('checked'))
$(this).attr('checked',true);
else
$(this).removeAttr('checked');
});
//搞定select选中状态
$("select option").each(function(){
if($(this).attr('selected'))
$(this).attr('selected',true);
else
$(this).removeAttr('selected');
});
//搞定 textarea
$("textarea").each(function(){
$(this).html($(this).val());
});
}
</script>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。