CODEWITHSUNDEEP
javascripthtml
Nitesh
Nitesh

Reputation: 15749

Values from Select option are not printed when I click on Print button

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.

Upvotes: 0

Views: 935

Answers (1)

CertainPerformance
CertainPerformance

Reputation: 370699

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);

Upvotes: 2

Related Questions