jquery移动输入文本值传递到第2页

时间:2013-10-04 03:35:57

标签: jquery jquery-mobile

我是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');
});

http://jsfiddle.net/HwFFU/1/

2 个答案:

答案 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;
});