logo标签列表

jQuery移动端多页提交

formsjquery-mobilecordova
4
我正在使用PhoneGap和jQuery Mobile编写移动应用程序。为了简化导航，我想使用
将单个表单分散到多个“页面”上。这样做的想法是为用户提供类似向导的体验，以填写大型表格。完成后，如果移动设备联网，则需要能够本地保存表单或提交表单。
如果将表单分成多个“虚拟”页面，我不知道如何使用jQuery Mobile提交或保存表单。我已经在网上搜索了很多但无法找到任何解决此问题的教程或示例。
任何帮助将不胜感激。
更新：
最近，我改变了处理多页面表单的方式，并且以下解决方案对我非常有效。您基本上使用命名约定，通过给它们以部门名称开始的id（例如：person-name、person-surname），使字段成为部门的一部分。请参见下面的答案。
我的建议是使用本地存储来保存数据（http://davidwalsh.name/html5-storage），我认为你可以在多个页面上拥有一个表单并且仍然能够提交。我之前用Alpha 4做过类似的事情，但是jQM从那个版本以来已经发生了很大变化。开始测试并发布你尝试过的代码，这样我们就可以更好地帮助你。 - Phill Pafford
说实话，我不知道从哪里开始。jQuery Mobile的多页面概念对我来说完全是个谜。实际上，你最终会得到一个跨越多个虚拟页面的表单，但这似乎并不正确，而且我也无法让它正常工作。 - Jack
我添加了这个问题：PhoneGap和jQuery实战教程，希望好的实际操作教程能够涵盖这个问题。 - Jack
你需要处理的主要问题是JQM会自动接管表单并通过Ajax提交它们。你想为表单编写自己的处理程序，并在将用户移动到下一页时存储数据。Phill建议使用本地存储，这是有道理的。我今天上午会在博客上发布一篇文章，介绍如何实现。请等待2-3小时后查看。 - Raymond Camden
实际上 - 如果您正在使用服务器端语言来管理用户所在的步骤，您可以完全不使用客户端JS代码来实现。基本上页面加载带有表单1，在提交后您的服务器端会存储并输出表单2。由于JQM自动获取结果并将其替换到DOM中，因此它可能只需要这样就能正常工作。我也会尝试一下这种方法。 - Raymond Camden
2个回答
6
你的示例提供了一个很好的解决方法，谢谢。我仍然希望能找到一个真正的jQuery多页面提交的好解决方案，有效地避免在最终表单完成之前与服务器交互。 - Jack
你的教程展示了一个很好的解决问题的替代方案，非常感谢。它真的做得很好，但不幸的是并没有回答我的问题，因为表单需要在本地填写，只有在完全完成后才能提交。我仍然希望找到一个依赖于JQM多页面功能的jQuery Mobile解决方案。在移动应用中，通常要尽量减少服务器往返次数，这对我来说非常重要。我仍在寻找解决方案，如果我找到了，我会发布它。 - Jack
让我看看能否按照您的要求重写它。不应该很难。 - Raymond Camden
哎呀，我是想说，等我写博客的时候，会解释我做了什么。 - Raymond Camden
http://www.coldfusionjedi.com/index.cfm/2011/11/22/Demo-of-a-multistep-form-in-jQuery-Mobile-Part-2 - Raymond Camden
显示剩余2条评论
1
对于遇到同样问题的人，这是一个快速的帮助。我尝试了“表单方法”，但它变得很混乱。基本上，你只需要将页面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>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接