Values from Select option are not printed when I click on Print button
Question
I have coded a javascript button to print all HTML from my page. When I click on the same, all prints fine except the values of option on select. Below is the code snippet.
Live demo of the issue:
https://codepen.io/T9-T9/pen/VwLKbOv
So on the demo, if you update the options from "a" to "b" or other and click on "Print Result", it will still print the default "a" and not what you select. Code snippet as below.
The HTML:
<div class="container" id="printcontent">
<div class="row">
<div>
<h4>Title here</h4>
<form>
<fieldset>
<label class='life_area'>01</label>
<select id='01'>
<option value="1">a</option>
<option value="2">b</option>
<option value="3">c</option>
<option value="4">d</option>
</select>
<label class='life_area'>02</label>
<select id='02'>
<option value="1">a</option>
<option value="2">b</option>
<option value="3">c</option>
<option value="4">d</option>
</select>
</fieldset>
</form>
</div>
</div>
</div>
<div id="print-content">
<form>
<input type="button" class="print-result" onClick="PrintElem('print-content')" value="print result"/>
</form>
</div>
The JavaScript:
function PrintElem(elem)
{
var mywindow = window.open('', 'PRINT', 'height=800,width=2200');
mywindow.document.write('<html><head>');
mywindow.document.write('</head><body>');
mywindow.document.write(document.getElementById('printcontent').innerHTML);
mywindow.document.write('</body></html>');
mywindow.document.close();
mywindow.focus();
setTimeout(function () {
mywindow.print();
mywindow.close();
}, 1000)
return true;
}
I made multiple updates, but cannot fix this part.
1 answers
solution1
1 2020-02-20 05:03:28
The innerHTML of an element will only retrieve the HTML markup - it won't retrieve state of an element which may not be in the HTML. For example, when a select changes, that doesn't change the HTML markup. (similarly, neither does putting text into an input box, nor does adding an event listener).
In this case, you can iterate through the options which are selected, and give them the selected attribute , which will be reflected in the HTML markup (and therefore retrieved properly). The selected attribute will result in the option in question being selected on pageload:
for (const option of document.querySelectorAll('option:checked')) {
option.setAttribute('selected', '')
}
mywindow.document.write(document.getElementById('printcontent').innerHTML);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.