JAVA Script printing input old value even it is changed in DOM

Question

HTML form has a input element with the default value, while printing the form using java-script it is print the default value even it is changed in DOM

JAVASCRIPT

$(document).on('click','.print',function(){
  var content = $('#printable_div').html();
  document.body.innerHTML =  content;
  window.print();
  document.body.innerHTML = content;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  
<div id='printable_div'>
  <div class='row'>
    <div class='col-md-2'><span>OPT value</span>
      <input type='text' class='form-control' value='50' />
    </div>
  </div>
</div>
<input type='button' class='btn btn-primary print' value='Print'>

Here default value of the input is 50, and i changed this value to 0 and tried to print it, but it's printing with the default value 50

how you are changing the value? – zabusa Feb 08 '18 at 06:03 — zabusa, Feb 08 '18 at 06:03

score 1 · Answer 1 · answered Feb 08 '18 at 06:05

It will be helpful to you, here I have added

var v=$(".in_put").val();$(".in_put").attr("value",v);

      $(document).on('click','.print',function(){
              var v=$(".in_put").val()
              $(".in_put").attr("value",v);
              var content = $('#printable_div').html();
              document.body.innerHTML =  content;
              window.print();
              document.body.innerHTML = content;
          });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='printable_div' >
              <div class='row'>
                    <div class='col-md-2'><span>OPT value</span>
                        <input type='text' class='form-control in_put' value="50"  />
                    </div>
               </div>
    </div>
       <input type='button' class='btn btn-primary print' value='Print'>

Thank you, it's working fine now – Ashok Sri Feb 08 '18 at 06:15 — Ashok Sri, Feb 08 '18 at 06:15

score 1 · Accepted Answer · answered Feb 08 '18 at 06:11

You can try like this.

$(document).on('click','.print',function(){
       $('#input-text').val(0);
       window.print();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id='printable_div'>
  <div class='row'>
    <div class='col-md-2'><span>OPT value</span>
        <input type='text' id="input-text" class='form-control' value='50' />
    </div>
   </div>
</div>
<input type='button' class='btn btn-primary print' value='Print'>

JAVA Script printing input old value even it is changed in DOM

2 Answers2