Member Avatar for DeborahJT

I have a form that cannot be submitted because the server doesn't accept cgi or php. So, I've decided to just have the user fill it out, print it and mail it in with payment.

I know I've used the "print" button before, but it's been a long time and I can't remember the code. Can you help me?

  • 2 Contributors
  • 2 Replies
  • 243 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by DeborahJT

Dani AI

Generated

Good quick answer from — for readers who need a bit more polish after ’s original question, here are practical additions and fixes that make a “print the filled form and mail it” workflow reliable and user-friendly.

Use a real button and unobtrusive JavaScript so keyboard users and screen readers behave predictably:

<button id="printForm" type="button">Print form</button>

<script>
document.getElementById('printForm').addEventListener('click', function () {
  window.print();
});
</script>

Keep the print view clean with a print-only stylesheet. Hide navigation, the print button itself, and any decorative backgrounds; make labels visible and ensure inputs either print as plain text or are visually neat:

@media print {
  .no-print { display: none !important; }
  input, textarea { border: none; box-shadow: none; background: transparent; }
  /* avoid printing site chrome */
  nav, .header, .footer { display: none !important; }
}

Browsers often print raw form controls, which can look messy. Convert inputs to plain text just for printing and restore them afterward using the beforeprint/afterprint hooks so the printed page is predictable:

function showValuesForPrint() {
  document.querySelectorAll('input, textarea').forEach(function(el){
    el.dataset._display = el.style.display || '';
    el.style.display = 'none';
    const span = document.createElement('span');
    span.className = 'print-value';
    span.textContent = el.value || el.placeholder || '';
    el.parentNode.insertBefore(span, el);
    el._printSpan = span;
  });
}
function restoreAfterPrint(){
  document.querySelectorAll('input, textarea').forEach(function(el){
    if (el._printSpan) el._printSpan.remove();
    el.style.display = el.dataset._display;
  });
}
window.addEventListener('beforeprint', showValuesForPrint);
window.addEventListener('afterprint', restoreAfterPrint);

Quick checklist: avoid anchor href="#" (it jumps the page), test on the target printers/browsers (margins differ between Letter/A4), and include a brief printable header with mailing address and payment instructions so users don’t miss it.

Recommended Answers

All 2 Replies

Member Avatar for DaveSW

<a href="#" onclick="window.print()">Print me!</a>

Member Avatar for DeborahJT

Thanks Dave. That's just what I was looking for!

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.