CODEWITHSUNDEEP
jqueryjquery-mobile
Giant
Giant

Reputation: 1649

jquery mobile input text value pass to page 2

im new in jquery mobile so i don't know how to pass the value of my dynamic input text boxes in my page1 to my next page2 when a button is clicked ive seen a sample but there is no command on button submit 

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

Upvotes: 0

Views: 366

Answers (2)

Ved
Ved

Reputation: 2701

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

Upvotes: 0

Sheetal
Sheetal

Reputation: 1366

Add id to the submit button:

 $('#kidsFields').append('<input id="submitBtn" href="#page2" type="submit" value="Submit" />');

add its click event:

$("#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));

});

You can save this formData into sessionStorage, which is a string representation of JSON key valued object with each input type and its associated values, to be used in any other pages. When you would get this item, you would need to parse it JSON.parse(sessionStorage.getItem("inputValues"));

Upvotes: 1

Related Questions