View Full Version : JavaScript cloneNode() with Select Boxes

08-11-2006, 06:37 PM
We have a "printer-friendly" function on our Intranet site which creates a pop-up window containing the page contents minus the header and left navigation. The JavaScript function takes the contents of the page (as defined by a div ID) and then strips out colors, borders, etc. To access the page contents in the new window, we do the following:

var outputObj = document.getElementById("contentArea");
var ccOutputObj = outputObj.cloneNode(true);

The problem is, cloneNode() does not preserve select box selections. If you select, let's say, 4 in a quantity select box, it defaults to 1 when the page is printed. The other form elements (input fields, radio buttons) preserve the values correctly.

Does anyone know how to preserve select box values when cloneNode() is used?


08-11-2006, 07:08 PM
save the selected Index then select the clone to that index

08-11-2006, 07:56 PM
Can you give an example of how to do this? This has to be dynamic and reusable across pages.


08-17-2006, 02:35 AM
Why not lose the javascript solution all together and use an at print style sheet (http://alistapart.com/stories/goingtoprint/)?


08-17-2006, 02:55 AM
Basscyst, does have a point.

Can you give an example of how to do this?
Use document.getElementById("contentArea").getElementsByTagName('select') and a for() loop to find all of the value selectedIndex property of each select element in the parent page and then set it in the child page.

08-17-2006, 04:30 AM
Basscyst, I wish I could do away with the JavaScript function altogether... but our user base is accustomed to the way we do printer friendly now and they don't want me changing it up :)

With that said, I'm going to give Kravvitz's suggestion a try tomorrow. Thanks everyone for your help!