在页面之间保留表单值

Question

在我的PhoneGap应用程序中，我有一个表单页面，其中有一个联系人按钮。当用户单击它时，将显示联系人页面以选择联系人，然后返回到表单以提交它。在 JSFiddle 中，返回到表单时，输入的数据仍在表单中，但在我的应用程序中，当我返回到表单时，所有输入的数据都已删除，因此用户需要再次填写表单。

从联系人页面返回时，如何将输入的表单数据保留在字段中？

当用户单击联系人页面中的完成按钮时，我使用此代码将所选数据传递到表单页面。

JSFiddle

$('#Done').on('click', function(){   
    $.mobile.changePage('FormPage.html', {
        dataUrl: 'FormPage.html?paremeter=' + selectedContact + ' ',
        data: {
            'paremeter': '' + selectedContact + ''
        },
        reloadPage: false,
        changeHash: false
    }); 
});

Answer 1

您可以使用弹出窗口而不是单独的页面。

这是您更新的小提琴

您的第 2 页现在是第一页中的弹出窗口。它包括一个可滚动的 DIV 和一个动态填充 100 个项目的列表视图：

<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;
}

在pageinit上，我添加了100个联系人，然后为联系人创建一个单击处理程序，该处理程序将选定的联系人ID写回表单中的字段并关闭弹出窗口：

$(document).on("pageinit", "#FormPage", function(){
    var contactsList;
    for (var i = 0; i< 100; i++){     
        contactsList += '<li><a href="#" class="contactLink" data-contactid="' + i + '">contact ' + i + '</a></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" )
    });
});