how do I print a html form along with its contents

Question

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>

you may use the **placeholder** thing in input tag. Check this http://jsfiddle.net/ng1bcu3r/1/ — YourFriend, Mar 20 '15 at 14:35

score 2 · Accepted Answer · answered Mar 20 '15 at 14:40

2

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

answered Mar 20 '15 at 14:40

CBroe

91,630
14
92
150

What do you mean, for one text input field only? Well then remove the loop, and use a selector that targets only that one field in the place of `this`. – CBroe Mar 20 '15 at 19:32
I have never used jquery so that's new to me. I added a function and called it from the button onclick but the user input was not captured. – Mike D Mar 20 '15 at 20:41
That just sets the value attributes (assuming you have included jQuery) – you still need to call `.html()` to get the resulting HTML code. – CBroe Mar 20 '15 at 20:48
The button onclick looks like this. ZorkIt should run your jquery and PrintElem does use .html(). I used – Mike D Mar 20 '15 at 21:18
I did manage to get a combination of the fiddle and the PrintElem to print the form and contents. Don't understand the difference between that and what I did above. When I get some time, I will post the final result as an answer for the record. Thanks very much for the help! – Mike D Mar 20 '15 at 21:32

score 1 · Answer 2 · edited Apr 08 '21 at 00:40

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"));
           });
        }
    
        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>

how do I print a html form along with its contents

2 Answers2

Linked

Related