Question

我有一个jQuery移动项目，允许用户以一种形式输入数据，然后（提交后）在客户端执行一些JavaScript计算并返回有用的输出。

我无法解决将输入数据传递到输出字段的基本过程＆＃34;提交＆＃34;更不用说执行任何计算或操作数据了。

在下面的示例中，我希望用户输入他们的名字，并在提交新页面时加载已填写的名称。实际发生的是表单加载很好，并在提交时显示报告页面但名称字段仍然是空白

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

我的JavaScript是：

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

或者

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

Answer 1

这是一个单页应用程序的解决方案，它不会向服务器发送任何数据：

<!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>

关键变化是：

使用链接替换提交按钮以避免JQM处理表单提交。
手动更改onclick处理程序中的页面。

这适用于JQuery Mobile 1.4。手动更改页面的方式与1.3中的方式完全不同，因此如果您使用旧版本，只需检查文档（如果我没记错的话，该函数称为changePage）。

Answer 2

问题在于：Javascript正在客户端运行。因此，在您发送页面后，您无法获得javascript变量。你必须得到POST变量。提交后，值字段为空。看看这个：

How to get POST variables in jQuery

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

2 个答案: