Question

我制作并形成一个按钮来打印表格。表单被打印但是没有用户输入显示。有没有办法包含用户输入？

<!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>

Answer 1

动态键入的值不是.html()获取的部分。（这取决于属性和属性之间的区别。）

但是，您可以使用以下内容将每个输入字段的value 属性设置为其当前值：

$('form input[type=text]').each(function() {
  $(this).attr('value', $(this).val());
});

- 然后.html()也会得到你那些。

http://jsfiddle.net/b39xpoou/（简化示例，使用div元素输出HTML，仅使用文本输入字段，......但应该很容易适应/修改。）

Answer 2

这是记录的一个工作示例。另请注意，一旦用户的输入被设置为属性值，重置按钮就不再清除表单。猜猜还需要一些jquery来解决这个问题。我添加了代码来处理复选框，但不知道如何处理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>

如何打印html表单及其内容

2 个答案: