Member Avatar for rukshilag

my code has a print button and when that is clicked i want a new window to open up wit a list of details that the user edits. that is all the data of the form. (only the values)
how do i do this?

  • 4 Contributors
  • 8 Replies
  • 402 Views
  • 1 Year Discussion Span
  • Latest Post Latest Post by dean8710

Dani AI

Generated

A cleaner, more reliable pattern than opening a write-into-popup flow is to serialize the form values, render a small printable document, and send that to the print subsystem. That keeps logic separate from markup and avoids popup blockers and the problem mentioned (closing the popup can cancel printing). was right to suggest reading values from the DOM; a modern, robust way to do that is to use FormData, normalize multiple values (checkbox groups, multi-selects) and then print from an off‑screen iframe or from a printable preview area in the same window.

// build a printable HTML table from a form and print it via an off-screen iframe
function printFormAsTable(formSelector) {
  const form = document.querySelector(formSelector);
  if (!form) return;
  const fd = new FormData(form);
  const grouped = Object.create(null);
  for (const [name, value] of fd.entries()) (grouped[name] = grouped[name] || []).push(value);

  let rows = '';
  for (const name in grouped) {
    rows += '<tr><td>' + escapeHtml(name) + '</td><td>' + escapeHtml(grouped[name].join(', ')) + '</td></tr>';
  }

  const html = '<!doctype html><html><head><meta charset="utf-8"><title>Print</title>' +
    '<style>body{font-family:Arial,Helvetica,sans-serif}table{border-collapse:collapse;width:100%}td{padding:6px;border:1px solid #ddd}</style>' +
    '</head><body><h2>Form values</h2><table>' + rows + '</table></body></html>';

  const frame = document.createElement('iframe');
  frame.style.position = 'fixed';
  frame.style.left = '-9999px';
  frame.srcdoc = html;
  document.body.appendChild(frame);

  frame.onload = () => {
    const w = frame.contentWindow;
    w.focus();
    w.print();
    const cleanup = () => frame.parentNode && frame.parentNode.removeChild(frame);
    if ('onafterprint' in w) w.onafterprint = cleanup;
    setTimeout(cleanup, 1500); // fallback
  };
}

function escapeHtml(s) {
  return String(s).replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
}

Practical notes and pitfalls: handle file inputs specially (only filenames can be shown unless FileReader is used to embed images); collect multiple checkboxes/multi-selects as lists (FormData returns each checked item); escape user input before embedding (shown above); provide a print-specific stylesheet so the printed layout is tidy. For compatibility, some older browsers do not support iframe.srcdoc — a small fallback to write into the iframe document can be added if needed. The off‑screen iframe approach answers ’s window idea but avoids an interactive popup; it also solves ’s issue because printing from the iframe leaves the main page visible and avoids closing a popup that would cancel printing.

Recommended Answers

All 8 Replies

Member Avatar for parry_kulk

In the opened popup window you can read the values of the parent window like,

window.opener.formname.elemname.value;

and then display this value on the pop up page

Member Avatar for Member #334542 
window.open

will open the new window

Member Avatar for rukshilag

so what do u mean i shud write a function in js is it?
if so can u give me an example?

this is all i have done so far

<script type="text/javascript">

function Clickheretoprint()
{ 
  var disp_setting="toolbar=yes,location=no,directories=yes,menubar=yes,"; 
  disp_setting+="scrollbars=yes,width=650, height=600, left=100, top=25"; 
  var content_vlue = document.getElementById("formData").innerHTML; 
  
  var docprint=window.open("","",disp_setting); 
   docprint.document.open(); 
   docprint.document.write('<html><head><title>Print Results</title>'); 
   docprint.document.write('</head><body  onLoad="self.print()"><center>');          
   docprint.document.write(content_vlue);          
   docprint.document.write('</center></body></html>'); 
   docprint.document.close(); 
   docprint.focus(); 

}
function dataprint()
{ 
  var disp_setting="toolbar=yes,location=no,directories=yes,menubar=yes,"; 
  disp_setting+="scrollbars=yes,width=650, height=600, left=100, top=25"; 

  window.opener.formname.elemname.value;
}
</script>
</head>

<?php
Member Avatar for parry_kulk

Your Clickheretoprint() function is doing most of the part except reading the form values.
Since you are using document.write to render data in the popup window there is no need for prefixing window.opener to access the form elements. You can directly access them by
document.formname.elementname.value


Here is an example using the same function which reads the value in a textbox and displays it in the popup window.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <script type="text/javascript">
 
function Clickheretoprint()
{ 
  var disp_setting="toolbar=yes,location=no,directories=yes,menubar=yes,"; 
  disp_setting+="scrollbars=yes,width=650, height=600, left=100, top=25"; 
  //Reading the form elements value
  var content_vlue = document.myform.yourname.value; 
 
  var docprint=window.open("","",disp_setting); 
   docprint.document.open(); 
   docprint.document.write('<html><head><title>Print Results</title>'); 
   docprint.document.write('</head><body  onLoad="self.print()"><center>');          
   docprint.document.write(content_vlue);          
   docprint.document.write('</center></body></html>'); 
   docprint.document.close(); 
   docprint.focus(); 
 
}

</script>
 </head>

 <body>
 <form name="myform" method=post action="">
	<input type="text" name="yourname" value="">
	<input type="button" value="Test" onclick="Clickheretoprint()">
 </form>  
 </body>
</html>

Hope this helps

Member Avatar for rukshilag

ok so u mean instead of this line var content_vlue = document.getElementById("formData").innerHTML; i should use
var content_vlue = document.myform.yourname.value; is it??
but then i wont need that div called formData either right?
i can just use that like u said var content_vlue = document.myform.yourname.value; continuously for all the values i want outputted right?

Member Avatar for parry_kulk

Yeah you are right. From what I understand about the flow in the code sample you posted, using code similar to
document.myform.yourname.value
for other form elements should be sufficient to read the values

Edited by parry_kulk because: n/a
Member Avatar for rukshilag

i mailed you my code - please check

Member Avatar for dean8710

How to hide the popup box, so user can directly view the print page behind?

because if we close the pop up box, the printing view also disappeared.
please

var disp_setting="toolbar=yes,location=no,directories=yes,menubar=yes,"; 
  disp_setting+="scrollbars=yes,width=650, height=600, left=100, top=25";
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.