Member Avatar for ultramel

hi

I have the following which brings up the print window for my page, however, I would only like to print the "echo" form data which is being displayed and not the entire page.

any suggestions would be greatly appreciated :-)

Thank you

<script>
function printpage()
{
window.print();
}
</script>



<input type="button" value="Print this page" onclick="printpage()" />
  • 4 Contributors
  • 4 Replies
  • 217 Views
  • 3 Hours Discussion Span
  • Latest Post Latest Post by almostbob

Dani AI

Generated

Good direction from the replies — combine ’s print stylesheet idea with ’s container suggestion and follow ’s caution about relying only on JavaScript. The simplest, most robust approach is CSS-first: wrap the echoed output in a dedicated element, escape your POST data on output, then use a print-only rule that hides everything except that element. Don’t try to turn $_POST['telNo'] into a CSS selector (that’s what caused the error in ’s attempt).

Example: put the echoed value into a printable region.

<div id="printable">
  <p>Telephone: <span class="value"><?php echo isset($_POST['telNo']) ? htmlspecialchars($_POST['telNo'], ENT_QUOTES, 'UTF-8') : ''; ?></span></p>
</div>

Print-only CSS that hides the rest of the page but shows the printable region (works in most browsers):

@media print {
  /* hide everything */
  body * { visibility: hidden !important; }
  /* show the printable region and its children */
  #printable, #printable * { visibility: visible !important; }
  /* position it at the top-left of the printed page */
  #printable { position: absolute; top: 0; left: 0; width: 100%; }
}

If you need a JS fallback (useful when the UI has a “Print” button or you must open a minimal print-only window), copy the printable element into a new window and call print there. Keep that as a fallback because some users block scripts.

Troubleshooting notes: ensure the print CSS is loaded/placed after other rules so it can override; use !important only where necessary; test print preview in several browsers because default margins and background printing differ; always escape $_POST output (as shown) to avoid XSS. This combination keeps on-screen UI intact while printing only the echoed form data.

Recommended Answers

All 4 Replies

Member Avatar for pritaeas

You can control that by using media print in your CSS.

Member Avatar for ultramel

Thank you. I have tried adding this, but it dosn't seem to be correct

<style>
@media screen
  {
  .$_POST['telNo']. {font-family:verdana,sans-serif;font-size:14px;}
  }
@media print
  {
  .$_POST['telNo']. {font-family:times,serif;font-size:10px;}
  }
@media screen,print
  {
  .$_POST['telNo']. {font-weight:bold;}
  }
</style>
<script>
function printpage()
{
window.print();
}
</script>

<input type="button" value="Print this page" onclick="printpage()" />
Edited by ultramel
Member Avatar for ehpratah

you should put first the form inside a div and add a javascript to print only the object inside the div you can search google or other search engine to give you some ideas on how to do it..

Member Avatar for almostbob

javascripts may not work, many users block javascript as security issue
css is easier

@media print { .dontprint {display:none;} }
@media screen { .dontshow{ display: none; }}

anthing you dont want to print is 'class="dontprint" '
a set of separate page headers and text to complete a printed page that does not show onscreen is the 'dontshow' class

Edited by almostbob
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.