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>

标签： javascript html forms

2条回答

祖国的老花朵

2楼-- · 2020-02-15 04:34

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

0人赞添加讨论(0) 举报

再贱就再见

3楼-- · 2020-02-15 04:53

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.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/Template_plain.dwt" codeOutsideHTMLIsLocked="false" -->
    <head>


    <title> </title>

    <!-- this code from stackoverflow http://stackoverflow.com/questions/2255291/print-the-contents-of-a-div -->

    <script src="http://ajax.googleapis.com/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"));
           });

        }
    </script>

    <script type="text/javascript">

        function PrintElem(elem)
        {
            Popup($(elem).html());
        }
    </script>

    <script type="text/javascript">
        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>

0人赞添加讨论(0) 举报

how do I print a html form along with its contents

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间