jquery - In form submit when i am going to next page the data is not coming -

this html first page in fill details

<div data-role="content">    <div data-role="fieldcontain">        <label for="name1">name</label>           <input name="name1" id="name1" value="" type="text">    </div>    <div data-role="fieldcontain">         <label for="age">age</label>         <input name="age" id="age" value="" type="text">    </div>    <div data-role="fieldcontain">         <label for="address">address</label>          <input name="address" id="address" value="" type="text">    </div>    <div data-role="fieldcontain">          <label for="mobile">mobile</label>          <input name="mobilet" id="mobile" value="" type="text">    </div>    <div data-role="button" data-theme="b" data-inline="true" id="button">submit</div> </div> 

below second page, in show filled data, 1 edit button given take user first page again.

<div data-role="content" id="content2">     <form id="form1">         <div data-role="fieldcontain">             <label for="name">name</label>             <span class="field" style="padding:350px;" id="un"></span>         </div>         <div data-role="fieldcontain">             <label for="age">age</label>             <span class="field1" style="padding:350px;" id="pw"></span>         </div>         <div data-role="fieldcontain">             <label for="address">address</label>             <span class="field2" style="padding:350px;" id="au"></span>         </div>         <div data-role="fieldcontain">             <label for="mobile">mobile</label>             <span class="field3" style="padding:350px;" id="fr"></span>         </div>          <div style="text-align:center;">                                 <div data-role="button" data-theme="b" data-inline="true" id="button2">edit</div>         </div>      </form> </div> 

in jquery:-

$(document).unbind('pageinit').bind('pageinit', function () {               $("#button1").click(function () {         callconnection();     });          $("#button2").click(function () {         calleditconnection();     }); });  function callconnection(){     localstorage.setitem("user", $("#name1").val());     localstorage.setitem("pass", $("#age").val());     $.mobile.changepage("#page2"); }  function calleditconnection(){     $("#un").val(localstorage.getitem("user"));     $("#pw").val(localstorage.getitem("pass"));     $.mobile.changepage("#page1");        } 

please me find out problem code page2 value of page1 not coming

from code can't see passing data page 2, assume want show data entered on page 1 ,in documnent bind method put code

$("#page2").on("pageshow", function (event) {     $("#un").text(localstorage.getitem("user"));     $("#pw").text(localstorage.getitem("pass")); }); 

the function triggered when page shown. here values local storage , put in html.

here working fiddle