jQuery移动表单自动提交并根据输入进行计算

Question

I have a jQuery mobile project which will allow users to enter data in a form which will then (after submit) perform some JavaScript calculations on the client-side and return a useful output. 我有一个jQuery移动项目，它将允许用户以某种形式输入数据，然后（在提交之后）在客户端执行一些JavaScript计算并返回有用的输出。

I can't work out the fundamental process for passing the input data to the output field upon "submit" let alone performing any calculations or manipulations of the data. 我无法确定在“提交”时将输入数据传递到输出字段的基本过程，更不用说执行数据的任何计算或操作了。

In the example below I want the user to enter their name and upon submit a new page loads with the name already filled in. What actually happens is that the form loads nicely, and on submit shows the report page but the name field remains blank 在下面的示例中，我希望用户输入名称，并在提交新页面时加载已经填充了名称的页面。实际发生的情况是表单加载良好，并且在提交时显示了报告页面，但名称字段保持空白

<form action="#report" name="formInput" method="post"data-ajax="false">
            <div class="ui-field-contain">
            <label for="name-1">Name:</label>
            <input name="name-1" id="name-1" value="" minlength="2" type="text" />
            </div>
            <div class="ui-grid-a">
            <div class="ui-block-a"><input type="reset" value="Reset" data-icon="back"data-theme="a"/></div>
            <div class="ui-block-b"><button type="submit" name="submit" value="submit"onclick="yourName();" data-theme="a">Submit</button></div>
            </div>
        </form>
    </div>
</div>

<!-- Start of third page -->
<div data-role="page"data-theme="b"data-add-back-btn="true" data-back-btn-text = "Home" id="report">
<div data-role="header">
    <a href="#" data-icon="back" data-rel="back" title="Go back">Back</a><h1>This is your name</h1>
</div>
    <div data-role="content">   
     <label for="name-rep">Name:</label>
    <input name="name-rep" id="name-rep" value="" minlength="2" type="text" />
    </div>

My JavaScript is: 我的JavaScript是：

enter code here
$("#formInput").submit(function(e){
var name = $('#name-1').val();
$('#name-rep').val(name);
});

Or maybe 或者可能

function yourName() {
var name = $('#name-1').val();
$('#name-rep').val(name);
    };   `

Answer 1

Here's a solution for a single page application that doesn't send any data to the server: 这是不向服务器发送任何数据的单页应用程序的解决方案：

<!doctype HTML>

<html class="ui-mobile">
    <head>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>

<body class="ui-mobile-viewport">
    <div data-role="page" data-theme="b" id="index">
        <form name="formInput" method="post" data-ajax="false">
            <div class="ui-field-contain">
                <label for="name-1">Name:</label>
                <input name="name-1" id="name-1" value="" minlength="2" type="text" />
            </div>
            <div class="ui-grid-a">
                <div class="ui-block-a">
                    <input type="reset" value="Reset" data-icon="back"data-theme="a"/>
                </div>
                <div class="ui-block-b">
                    <a data-role="button" onclick="yourName();" data-theme="a">Submit</a>
                </div>
            </div>
        </form>
    </div>

    <!-- Start of third page -->
    <div data-role="page"data-theme="b"data-add-back-btn="true" data-back-btn-text = "Home" id="report">
        <div data-role="header">
            <a href="#" data-icon="back" data-rel="back" title="Go back">Back</a>    
            <h1>This is your name</h1>
        </div>

        <div data-role="content">   
            <label for="name-rep">Name:</label>
            <input name="name-rep" id="name-rep" value="" minlength="2" type="text" />
        </div>
    </div>
</body>

<script>
    function yourName() {
        var name = $('#name-1').val();
        $('#name-rep').val(name);

        $.mobile.pageContainer.pagecontainer("change", "#report");
    };
</script>
</html>

The crucial changes are: 关键的变化是：

Replacing the submit button with a link to avoid JQM handling the form submission. 用链接替换“提交”按钮，以避免JQM处理表单提交。
Manually changing the page in the onclick handler. 在onclick处理程序中手动更改页面。

This is for JQuery Mobile 1.4. 这是针对JQuery Mobile 1.4的。 The way you manually change the page is quite different from how it was in 1.3, so if you're using an older version just check the docs (the function is called changePage if I recall correctly). 手动更改页面的方式与1.3版本完全不同，因此，如果您使用的是旧版本，则只需检查docs（如果我没记错的话，该功能称为changePage）。

Answer 2

Here's the problem: Javascript is running on the client side. 问题出在这里：Javascript在客户端运行。 And because of that, you cant get a javascript variable after you've sent your page. 因此，发送页面后就无法获取JavaScript变量。 You have to get the POST variable. 您必须获取POST变量。 The value field is empty after the submit. 提交后，值字段为空。 Check this out: 看一下这个：

How to get POST variables in jQuery 如何在jQuery中获取POST变量

jQuery移动表单自动提交并根据输入进行计算

问题描述

2 个解决方案

解决方案1
1 已采纳 2014-05-09 10:05:18

解决方案2
0 2014-05-09 06:31:43

jQuery移动表单自动提交并根据输入进行计算

问题描述

2 个解决方案

解决方案1 1 已采纳 2014-05-09 10:05:18

解决方案2 0 2014-05-09 06:31:43

解决方案1
1 已采纳 2014-05-09 10:05:18

解决方案2
0 2014-05-09 06:31:43