我是jquery mobile的新手,所以我不知道如何在点击按钮时将我的page1中的动态输入文本框的值传递到我的下一页2我看过一个示例但按钮上没有命令提交
<div data-role="page">
<div data-role="header">
<h1>My Title</h1>
</div><!-- /header -->
<div data-role="content">
<form method="post" action="processForm.php">
<li data-role="fieldcontain">
<label for="children" class="select">Number of Kids</label>
<select name="children" id="children" data-mini="true">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</li>
<div id="kidsFields"></div>
</form>
</div><!-- /content -->
</div>
var html = '';
$('#children').on('change', function() {
children = $(this).val();
html = '';
for (var i = 0; i < children; i++) {
html += '<label>Name</label><input type="text" id="textName' + i + '" name="child' + i + 'Name" /><label>Age</label><input type="text" name="child' + i + 'Age" id="textAge' + i + '" />';
}
$('#kidsFields').html(html);
$('#kidsFields').append('<input type="submit" value="Submit" />');
$('.ui-page').trigger('create');
});
答案 0 :(得分:1)
将ID添加到提交按钮:
$('#kidsFields').append('<input id="submitBtn" href="#page2" type="submit" value="Submit" />');
添加其点击事件:
$("#submitBtn").off('click').on('click', function () {
// page1 is the id of the data-role page, having input type elements
var formData = $("#page1 :input").serializeArray();
// sessionStorage.setItem("inputValues", JSON.stringify(formData));
});
您可以将此formData保存到sessionStorage中,sessionStorage是JSON键值对象的字符串表示形式,具有每种输入类型及其关联值,可在任何其他页面中使用。当你得到这个项目时,你需要解析它JSON.parse(sessionStorage.getItem(“inputValues”));
答案 1 :(得分:0)
On page1 you can store with local storage
use button instead of type="submit"
>> frm is form id
<input type="button" value="Submit" id="btn_submit" />
$('#btn_submit').on('click', function(event) {
event.preventDefault();
if(event.handled !== true)
{
localStorage.setItem("formdata", $('#frm').serialize());
event.handled = true;
}
return false;
});
On page2 load event get local storage value.
$('#page2').on('pageshow',function(event){
if(event.handled !== true){
localStorage.getItem("formdata");
event.handled = true;
}
return false;
});