How to print dropdown selection value in Print.js?

Question

please could you assist with printing a dropdown selection value when using the Print.js Javascript Library, the original selection remains and it does not dynamically change when you get the print window...

https://codepen.io/markchavush/pen/WWrWda

    <!DOCTYPE html>
<html lang="en">
<head>

  <!-- Basic Page Needs
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <meta charset="utf-8">
  <title>Your page title here :)</title>
  <meta name="description" content="">
  <meta name="author" content="">

  <!-- Mobile Specific Metas
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- FONT
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">

  <!-- CSS
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/skeleton.css">

  <!-- Favicon
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <link rel="icon" type="image/png" href="images/favicon.png">

</head>
<body>

  <!-- Primary Page Layout
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <div class="container">
   <form method="post" action="#" id="printJS-form">
  <div class="row">
    <div class="six columns">
      <label for="exampleEmailInput">Your email</label>
      <input class="u-full-width" type="email" placeholder="test@mailbox.com" id="exampleEmailInput">
    </div>
    <div class="six columns">
      <label for="exampleRecipientInput">Reason for contacting</label>
      <select class="u-full-width" id="exampleRecipientInput">
        <option value="Option 1">Questions</option>
        <option value="Option 2">Admiration</option>
        <option value="Option 3">Can I get your number?</option>
      </select>
    </div>
  </div>
  <label for="exampleMessage">Message</label>
  <textarea class="u-full-width" placeholder="Hi Dave …" id="exampleMessage"></textarea>


</form>
      <button type="button" onclick="printJS({ printable: 'printJS-form', type: 'html', header: 'PrintJS - Form Element Selection', css: 'https://cdnjs.cloudflare.com/ajax/libs/skeleton-framework/1.1.1/skeleton.min.css' })">
    Print Form with Header
 </button>
</div>
<!-- End Document
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
<script src="https://printjs-4de6.kxcdn.com/print.min.js"></script>
</body>
</html>

Please go directly to the codepen and press the print button to see that the dropdown list value does not appear correctly in the printout...

Cheers

Mark

Hi! Welcome to stackoverflow. Please take a moment and read [ask] and edit your question with [mcve] and explain in detail what is the problem you are facing. — Esko, Apr 04 '19 at 11:59

score 0 · Accepted Answer · answered Apr 04 '19 at 20:25

You can't, not with the Print.js library.

The problem you're facing is a known issue - there was an issue created on their GitHub repo detailing this exact issue back in 2018. (That issue was merged to this open issue instead, since apparently it's the same problem). The original GitHub issuer even created a JSFiddle demoing the same problem you show in your codepen.

My only recommendation would be to attempt to implement something similar to this answer, though I won't pretend it will be easy.

How to print dropdown selection value in Print.js?

1 Answers1