jQuery移動表單自動提交並根據輸入進行計算
[英]jQuery mobile form self-submit and calculate from inputs
問題描述
我有一個jQuery移動項目，它將允許用戶以某種形式輸入數據，然后（在提交之后）在客戶端執行一些JavaScript計算並返回有用的輸出。
我無法確定在“提交”時將輸入數據傳遞到輸出字段的基本過程，更不用說執行數據的任何計算或操作了。
在下面的示例中，我希望用戶輸入名稱，並在提交新頁面時加載已經填充了名稱的頁面。實際發生的情況是表單加載良好，並且在提交時顯示了報告頁面，但名稱字段保持空白
<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);
}; `
2 個解決方案
解決方案1
1 已采納 2014-05-09 10:05:18
這是不向服務器發送任何數據的單頁應用程序的解決方案：
<!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版本完全不同，因此，如果您使用的是舊版本，則只需檢查docs（如果我沒記錯的話，該功能稱為changePage）。
解決方案2
0 2014-05-09 06:31:43
問題出在這里：Javascript在客戶端運行。 因此，發送頁面后就無法獲取JavaScript變量。 您必須獲取POST變量。 提交后，值字段為空。 看一下這個：
使用JQuery自提交表單
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.