jquery - Why Input having blank Values? While Printing HTML -

this html

<form action="" method="post" id="form"> <div id="jj">     <input type="text" value=""/>     <input type="text" value=""/>     <input type="text" value=""/>     <input type="text" value=""/> </div> <input type="submit" value="submit"> </form> 

i have send html of jj id div page create pdf using https://code.google.com/p/dompdf/

my jquery code :

$('#form').submit(function(){  //$('#textarea').val($('#jj').html());  console.log($('#jj').html());  return false;  }); 

every time when fill input , click on submit. console having html of blank input values. why????? want values of input also.

console output:

<input type="text" value="">     <input type="text" value="">     <input type="text" value="">     <input type="text" value=""> 

fiddle

changing value of input not change underlying html. can jquery.

just add:

$("input").keyup(function () {     $(this).attr('value', $(this).val()); }); 

explanation:

every time write in input elements code changing underlying html. set value attribute string wrote.

demo

edit

as batu zet pointed out doesnt work on copy/paste through mouse. better use code:

$('input').on("input", function() {     $(this).attr('value', $(this).val()); }); 

demo2