Question

我正在使用PhoneGap和jQuery Mobile编写移动应用程序。为了简化导航，我想使用 div data-role =“page”在多个“页面”上传播单个表单。我们的想法是为用户提供类似填充大型表单的向导。完成后，我需要能够在本地保存表单，或者在移动设备在线时提交表单。

如果表单被拆分为多个“虚拟”页面，我不明白如何使用jQuery Mobile提交或保存表单。我在网上搜索但找不到任何有关解决此问题的教程或示例。

任何帮助将不胜感激。

更新

我最近改变了使用多页表单的方式，这个解决方案对我很有用。你基本上使用一个命名约定，其中字段成为部分的一部分，给它们的id以部分名称和破折号开头，例如：person-name，person-surname。请参阅下面的答案。

Answer 1

好的，我在这里发表了自己的想法：http://www.coldfusionjedi.com/index.cfm/2011/11/18/Demo-of-a-multistep-form-in-jQuery-Mobile

基本上我最终使用服务器端语言一次只包含表单的正确部分。（我正在使用ColdFusion，但任何语言都可以正常工作。）表单自我发布并根据您在此过程中的位置显示正确的步骤。

Answer 2

快速帮助遇到同样问题的人。我做了'形式的东西'，但它变得草率。你基本上只是将页面div嵌入到表单元素中，但这不是很优雅，并且给了我一些导航问题。

所以我最终得到了自己的解决方案，可以在多种形式（+/- 1000个元素）上运行。不是最优雅的，但它就像一个魅力：

<!DOCTYPE html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <meta charset="utf-8"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
    <script>
        $(function () {
            $('#submit_my_form').click(function (e) {
                alert(JSON.stringify(readFormData('names')));
                alert(JSON.stringify(readFormData('dates')));
            });
        });

        function readFormData(section) {
            var sectionData;
            var els = $(':input[id|='+section+']');

            var sectionData = {};
            $.each(els, function() {
                if (this.name && !this.disabled && (this.checked
                    || /select|textarea/i.test(this.nodeName)
                    || /text|hidden|password|date|email/i.test(this.type))) {
                    sectionData[this.name.substr(section.length+1)] = $(this).val();
                    console.log(this.name + " -> " + $(this).val());
                }
            });
            return sectionData;
        }
    </script>
</head>

<body>
    <div data-role="page" id="menu" data-theme="a">
        <div data-role="header" data-position="fixed">
            <h1>Menu Page</h1>
        </div>
        <div data-role="content">
            <ul data-role="controlgroup">
                <li><a target_id="page1" href="#page1" data-role="button"
                       style="text-align:left" data-icon="arrow-r"
                       data-iconpos="right" class=".ui-icon-manditory">Page1</a></li>
                <li><a target_id="page2" href="#page2" data-role="button"
                       style="text-align:left" data-icon="arrow-r"
                       data-iconpos="right">Page2</a></li>
            </ul>
            <input id="submit_my_form" type="button" name="send" value="Submit"/>
        </div>
        <div data-role="footer" data-position="fixed" class="ui-btn-right" style="min-height:42px;">
            Menu page footer
        </div>
    </div>

    <div data-role="page" id="page1" data-theme="a">
        <div data-role="header" data-position="fixed">
            <a href="#menu" data-icon="arrow-l" data-direction="reverse">Prev</a>
            <h1>Page 1</h1>
            <a href="#page2" data-icon="arrow-r">Next</a>
        </div>
        <div data-role="content">
            <label for="names-initials">Name:</label>
            <input type="text" name="names-initials" id="names-initials" value=""/>
            <label for="names-surname">Surname:</label>
            <input type="text" name="names-surname" id="names-surname" value=""/>
        </div>
        <div data-role="footer" data-position="fixed" class="ui-btn-right" style="min-height:42px;">
        </div>
    </div>

    <div data-role="page" id="page2" data-theme="a">
        <div data-role="header" data-position="fixed">
            <a href="#page1" data-icon="arrow-l" data-direction="reverse">Prev</a>
            <h1>Page 2</h1>
        </div>
        <div data-role="content">
            <label for="dates-birthday">Birthday:</label>
            <input type="date" name="dates-birthday" id="dates-birthday" value=""/>
        </div>
        <div data-role="footer" data-position="fixed" class="ui-btn-right" style="min-height:42px;">
            <a href="#menu" data-icon="arrow-l" data-direction="reverse" data-iconpos="left"
               style="margin-left: 10px; margin-top: 5px">Back to Main From</a>
        </div>
    </div>
</body>
</html>

jQuery移动多页提交

2 个答案: