javascript - how do I print a html form along with its contents

Question

Welcome To Ask or Share your Answers For Others

javascript - how do I print a html form along with its contents

posted Oct 24, 2021 in Technique[技术] by 深蓝 (71.8m points)

javascript - how do I print a html form along with its contents

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>

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-23T18:25:53+0000

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 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.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.)

Categories

javascript - how do I print a html form along with its contents

javascript - how do I print a html form along with its contents

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags