Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5

Thread: Printing Div

  1. #1
    New to the CF scene
    Join Date
    May 2013
    Location
    KGFK
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Printing Div

    I am brand new to javascript, any help on this would be greatly appreciated. I have got a <div> section which I would like to print. I have this code solved, what I can't figure out is how to print what the user inputs into a small text form.

    Code:
    <?php
    if(Auth::LoggedIn() == false)
    {
       echo 'Please login to view this page.';
       return;
    }
    ?>
    <script language="javascript" type="text/javascript">
        function printDiv(divID) {
    	//Get the HTML of div
            var divElements = document.getElementById(divID).innerHTML;
            //Get the HTML of whole page
            var oldPage = document.body.innerHTML;
    
    	//Reset the page's HTML with div's HTML only
            document.body.innerHTML = 
              "<html><head><title></title></head><body>" + 
              divElements + "</body>";
    
            //Print Page
            window.print();
    
            //Restore orignal HTML
            document.body.innerHTML = oldPage;
             
        }
    </script>
    <?php
    //Variables
    	$timedate=getdate(date("U"));
    ?>
    <div id="dispatch" style="width=100%;height=600px;position=absolute;font=courier;text-align=center;">
    	<table width="800px" align="center" cellpadding="4">
    	<tr>
    	<td width="80%"><img src="http://www.hphvirtual.com/HPH-Dispatch_logo.jpg" alt="Hemisphere Virtual Airlines"/><br>I.F.R. Part 121 - Dispatch Release</td>
    	<td><font size="2"><?php echo "$timedate[mon]/$timedate[mday]/$timedate[year] <br/> $timedate[hours]:$timedate[minutes]";?><br><?php Aircraft: echo"{$schedule->aircraft}";?></font></td>
    	</tr>
    	</table>
    	<hr noshade size="8" color="black">
    	<table width="800px" align="center" cellpadding="4">
    	<tr>
    	<td>Flight #:</td>
    	<td><?php echo"{$schedule->flightnum}";?></td>
    	<td>Departure:</td>
    	<td><?php echo"{$schedule->depicao}";?></td>
    	<td>Arrival:</td>
    	<td><?php echo"{$schedule->arricao}";?></td>
    	<td>Alternate:</td>
    	<td><input form="alternate"></input></td>
    	</tr>
    	</table>
    <input type="button" value="Save Values" onclick="" />
    <input type="button" value="Print Dispatch" onclick="javascript:printDiv('dispatch')" />
    </div>
    One of the last lines of code has an <input form>, when the user clicks to print, everything goes well except that the users inputs are not saved. How can I have the users input saved for only the print function?

    Thanks

    Tom

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,642
    Thanks
    6
    Thanked 1,005 Times in 978 Posts
    Your way of thinking seems to be as outdated and erroneous as the HTML you have there.

    Why do you make it so complicated with JS and remove and reinsert the whole content when you simply could use a print stylesheet (CSS file with print media type)? And run your HTML through a validator, I get eye cancer when I see that.

  • #3
    New to the CF scene
    Join Date
    May 2013
    Location
    KGFK
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by VIPStephan View Post
    Your way of thinking seems to be as outdated and erroneous as the HTML you have there.

    Why do you make it so complicated with JS and remove and reinsert the whole content when you simply could use a print stylesheet (CSS file with print media type)? And run your HTML through a validator, I get eye cancer when I see that.
    I have been updating my code, yes I know that some of the things I use are depreciated. I am a pretty big amateur at this and my goal right now is to make it work. I really don't even know what print stylesheet will do for me. I have been working with my code a little more and I do have a lot of it placed in <divs> now.

    <link rel="stylesheet" media="all" type="text/css" href="<?php echo SITE_URL?>/lib/skins/HPHv1AMS/style.css" />
    <?php
    if(Auth::LoggedIn() == false)
    {
    echo 'Please login to view this page.';
    return;
    }
    ?>
    <script language="javascript" type="text/javascript">
    function printDiv(divID) {
    //Get the HTML of div
    var divElements = document.getElementById(divID).innerHTML;
    //Get the HTML of whole page
    var oldPage = document.body.innerHTML;

    //Reset the page's HTML with div's HTML only
    document.body.innerHTML =
    "<html><head><title></title></head><body>" +
    divElements + "</body>";

    //Print Page
    window.print();

    //Restore orignal HTML
    document.body.innerHTML = oldPage;

    }
    </script>
    <?php
    // PHP Variables
    $timedate=getdate(date("U"));
    ?>
    <table width="800px" align="center" cellpadding="0">
    <tr>
    <td>
    <div id="dispatch">
    <div id="disheader">
    <table width="800px" align="center" cellpadding="4">
    <tr>
    <td width="80%"><img src="http://www.hphvirtual.com/HPH-Dispatch_logo.jpg" alt="Hemisphere Virtual Airlines"/><br>I.F.R. Part 121 - Dispatch Release</td>
    <td><?php echo "$timedate[mon]/$timedate[mday]/$timedate[year] <br/> $timedate[hours]:$timedate[minutes]";?><br>Aircraft: <?php Aircraft: echo"{$schedule->aircraft}";?></td>
    </tr>
    </table>
    </div>
    <div id="disflight">
    <hr noshade size="8" color="black">
    <table width="800px" align="center" cellpadding="4">
    <tr>
    <td><b>Flight Information</b></td>
    <td></td>
    </tr>
    <tr>
    <td>Flight #:</td>
    <td><?php echo"{$schedule->flightnum}";?></td>
    <td>Departure:</td>
    <td><?php echo"{$schedule->depicao}";?></td>
    <td>Arrival:</td>
    <td><?php echo"{$schedule->arricao}";?></td>
    <td>Alternate:</td>
    <td><input form="alternate" size="8"></input></td>
    </tr>
    <tr>
    <td>A/C IDENT:</td>
    <td><input form="tailnum" size="8"></input></td>
    <td>Dep. Time:</td>
    <td><?php echo"{$schedule->deptime}";?></td>
    <td>Arr. Time:</td>
    <td><?php echo"{$schedule->arrtime}";?></td>
    <td>Flt. Time:</td>
    <td><?php echo"{$schedule->flighttime}";?></td>
    </tr>
    </table>
    <hr noshade size="4" color="black">
    </div>
    <div ="disroute">
    <table width="800px" align="center" cellpadding="4">
    <tr>
    <td><b>Route Information</b></td>
    </tr>
    <tr>
    <td width="20%">Departure Procedure:</td>
    <td><input form="deppro" size="100"></input></td>
    </tr>
    <tr>
    <td width="20%">Cruise:</td>
    <td><input form="cruise" size="8"></input></td>
    </tr>
    <tr>
    <td width="20%">En-Route Procedure:</td>
    <td><input form="enrtpro" size="100"></input></td>
    </tr>
    <tr>
    <td width="20%"> Arrival Procedure:</td>
    <td><input form="arrpro" size="100"></input></td>
    </tr>
    </table>
    </div>
    <div id="disfuel">
    <table width="800px" align="center" cellpadding="4">
    <tr>
    <td width="45%"><b>Fuel Information</b></td>
    <td></td>
    <td width="45%"><b>Weight Information</b></td>
    </tr>
    <tr>
    <td width="45%"><hr noshade size="4" color="black"></td>
    <td></td>
    <td width="45%"><hr noshade size="4" color="black"></td>
    </tr>
    </table>
    </div>
    <input type="button" value="Print Dispatch" onclick="javascriptrintDiv('dispatch')" />
    </div>
    </td>
    </tr>
    </table>
    I have had to use the table outside of the <div> because otherwise something collapses with my css on the side and my right menu shifts.

  • #4
    New to the CF scene
    Join Date
    May 2013
    Location
    KGFK
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I know my code isn't exactly the cleanest, but does anyone know how to get the user inputs in the forms to carry over when the user prints?

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,216
    Thanks
    75
    Thanked 4,344 Times in 4,310 Posts
    Yes. Print the page.

    It's this horrible horrible code that causes it not to work:
    Code:
    document.body.innerHTML = 
    "<html><head><title></title></head><body>" + 
    divElements + "</body>";
    As you were told, use CSS instead.

    Example:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Testing</title>
    <style type="text/css">
    @media screen {
        .screenonly { display : block; }
        .printonly { display : none; }
        * { font-size : 16px; }
    }
    @media print {
        .screenonly { display : none; }
        .printonly { display : block; }
        * { font-size: 24px; }
    }
    </style>
    </head>
    <body>
    <div class="screenonly">
        These instructions will not print.<br/>
        Just fill in the form fields and click on the print button to see this all work.<br/>
    </div>
    <form>
       Name: <input name="username" size="50" />
       <br/>
       Gender: <input name="gender" type="radio" value="m" /> Male
               <input name="gender" type="radio" value="f" /> Female
       <br>
       Tell why you like this:<br/>
       <textarea name="reason" rows="6" cols="50"></textarea>
       <div class="screenonly"> 
           <input type="button" value="print this page" onclick="window.print();" />
       </div>
    </form>
    <div class="printonly">
        Thank you for printing this form and showing how easy this all is.
    </div>
    </body>
    </html>
    Go on, actually try that.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •