Persist form values between pages - jquery-mobile

Question

In my PhoneGap app I have a form page in which there is a contacts button. When the user clicks it the contacts page appears to select a contact and then returns to the form to submit it. In the JSFiddle when returning to the form the entered data still in the form, but in my app when I return to the form all the entered data has been removed so the user needs to fill the form again.
How can I keep the entered form data in the fields when returning to it from the contacts page?
When the user clicks the done button in the contacts page I use this code to pass the selected data to the formPage.
JSFiddle
$('#Done').on('click', function(){
$.mobile.changePage('FormPage.html', {
dataUrl: 'FormPage.html?paremeter=' + selectedContact + ' ',
data: {
'paremeter': '' + selectedContact + ''
},
reloadPage: false,
changeHash: false
});
});

Answer 1

You can use a popup instead of a separate page.
Here is your updated FIDDLE
Your page 2 is now a popup within the first page. It includes a DIV that is scrollable and a listview which is dynamically populated with 100 items:
<div data-role="popup" id="page2" data-position-to="window">
<div id="scrollDiv">
<ul data-role="listview" id="contactsList">
</ul>
<div>
</div>
#scrollDiv{
max-height: 450px;
width: 300px;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
On pageinit I add 100 contacts and then creat a click handler for the contacts that writes the selected contact id back to a field in the form and closes the popup:
$(document).on("pageinit", "#FormPage", function(){
var contactsList;
for (var i = 0; i< 100; i++){
contactsList += '<li>contact ' + i + '</li>';
}
$("#contactsList").append($(contactsList));
$("#contactsList").listview("refresh");
$(".contactLink").on("click", function(){
var msg = 'you selected contact: id = ';
msg += $(this).data("contactid");
$("#selContact").val(msg);
$("#page2").popup( "close" )
});
});