Question

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

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

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

JSFiddle

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

Answer 1

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

以下是您更新的 FIDDLE

您的第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" )
    });
});

在页面之间保留表单值

1 个答案: