admin管理员组文章数量:1401256
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" ".dtd">
<html xmlns=""><!-- InstanceBegin template="/Templates/Template_plain.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<!-- this code from stackoverflow -->
<script type="text/javascript" src=".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>
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/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3/1999/xhtml"><!-- InstanceBegin template="/Templates/Template_plain.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<!-- this code from stackoverflow http://stackoverflow./questions/2255291/print-the-contents-of-a-div -->
<script type="text/javascript" src="http://jqueryjs.googlecode./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>
-
There is no opening
<style>tag. Why are you closing one? – Prerak Sola Commented Mar 20, 2015 at 14:19 - you may use the placeholder thing in input tag. Check this jsfiddle/ng1bcu3r/1 – YourFriend Commented Mar 20, 2015 at 14:35
2 Answers
Reset to default 2Dynamically typed values are not part of what .html() gets you. (This es down to the difference between properties and attributes.)
You can however set the value attribute 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/b39xpoou/ (Simplified example, using a div element to output the HTML, using only text input fields, … but should be easy enough to adapt/modify.)
Here's a working example for the record. Also note once the user's input is set as the attribute value, the reset button no longer clears the form. Guess some more jquery is needed to fix that. I added code to handle checkboxes but have no idea what to do with textareas.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3/1999/xhtml"><!-- InstanceBegin template="/Templates/Template_plain.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<title> </title>
<!-- this code from stackoverflow http://stackoverflow./questions/2255291/print-the-contents-of-a-div -->
<script src="http://ajax.googleapis./ajax/libs/jquery/1.11.2/jquery.min.js">
</script>
<script type="text/javascript">
function CopyElem(elem)
{
$('form input[type=text]').each(function() {
$(this).attr('value', $(this).val());
});
$('form input[type=checkbox]').each(function() {
$(this).attr('checked', $(this).prop("checked"));
});
}
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 -->
</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"></input>
<br/><br/>
Street Address:<br/>
<input type="text" name="F_Address" size="30"></input>
City:
<input type="text" name="F_City" size="12"></input>
State:
<input type="text" name="F_State" size="2"></input>
Zip Code:
<input type="text" name="F_ZipCode" size="5"></input>
<br/><br/>
<input type="reset" value="Reset"></input>
<br/><br/>
</form>
</div> <!-- end #container -->
<input type="button" value="Print" onclick="CopyElem();PrintElem('#container')" />
<div id="copyoutput" style="display: none;"></div>
</body>
</html>
本文标签： javascripthow do I print a html form along with its contentsStack Overflow
版权声明：本文标题：javascript - how do I print a html form along with its contents - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744289953a2599067.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论