CODEWITHSUNDEEP
jqueryjquery-mobile
prodhan
prodhan

Reputation: 29

Jquery mobile, working with multiple pages

suppose I've following html along with jquery mobile linked:

<section id="firstpage" data-role="page">

<label for="a">Enter a</label>
<input id="a" type="number"/>

<label for="b">Enter b</label>
<input id="b" type="number"/>

<label for="c">Enter c</label>
<input id="c" type="number"/>

<a href="#secondpage" data-role="button" data-transition="flip">Show Them!</a>
    </section>

    <section id="secondpage" data-role="page">
<!--I want to show the three values of a,b,c here -->
    </section>

As you can see the first page will have a button, and when I'll press that it'll direct me to the second page. Now, suppose I'm saving the input field values to three variables in my script. How to show them in the second page, I'm getting stucked at that?

If you just write a simple jquery script that will take these three values in the first page and show them when directed in the second page in its inner html, that'll work for me.

Upvotes: 0

Views: 81

Answers (2)

Anam Ahmed
Anam Ahmed

Reputation: 208

just give the button element an id like : 

 <a href="#secondpage" id="mybutton" data-role="button" data-transition="flip">Show Them!</a>

and then use jquery to do the rest,

 $('#mybutton').tap(function(){

 var a = $('#a').val();

 var b = $('#b').val();

 var c = $('#c').val();

 var total= 'a is '+ a + ',b is' + b + ',c is' + c;
 $('#secondpage').html(total);
 });

that should do the work

Upvotes: 0

Solomon Closson
Solomon Closson

Reputation: 6217

Place the following code within the <head> tag after loading up jQuery and jQuery mobile within the $(document).ready(function(){ ... }); call:

$("#secondpage").on("pagebeforeshow", function(e, data) {
    data.prevPage.find('input').each(function(index) {
        $('#secondpage').append('<div>' + $(this).val() + '</div>');
    });
});

Note, since you have your input fields type set to number it will only output numbers, anything else will be blank output.

jsFiddle

Upvotes: 1

Related Questions