Take the 2-minute tour ×

I am working on an application using jquery mobile. I need to include a few pages in one preview page before a final Submit of form.

Here is a basic idea about my application. It needs at least 10-15 forms to collect the data from user. And my html looks something like this:

<div data-role="page" id="login-page">


<div data-role="page" id="form1-page">
<!-- CONTENT -->

<div data-role="page" id="form2-page">
<!-- CONTENT -->

<div data-role="page" id="preview-page">
<!-- CONTENT -->

I have linked my Preview button to preview page. The problem is, I want to include all the forms' page with filled values in preview page dynamically.

Can anyone help me with that?

P.S: I already tried to google. I found this answer. But may be I misunderstood something as it didn't work in my case.

Note: I am rendering this in android webview.

share|improve this question
What do you mean by "include all the forms page in that page dynamically"? You mean what the end user has entered for each form? –  Phill Pafford Mar 21 '13 at 13:27
@PhillPafford Yes. I want to show all the details from all forms as a preview before a final submit. –  Mystic Magic Mar 22 '13 at 4:12
I would look into html5 webstorage w3schools.com/html/html5_webstorage.asp save each form results to it and retrieve them on the final page –  Phill Pafford Mar 22 '13 at 14:15
add comment

2 Answers

up vote 4 down vote accepted

Finally, I achieved what I wanted. It was not that difficult. I can't get why anyone couldn't give any hint! :(

I am posting my answer here so that it can help someone in future for similar problem.

Firstly, I added following in .js file.

$("#preview-page").live('pageinit', function() {

Here, divPage1Preview, divPage2Preview are blank divs defined in preview-page form. And page1-content, page2-content are ids for content div in form1-page and form2-page.

From this, I could get all the fields but not the values inside it. So I changed my html a bit like:

<div data-role="content" id ="page1-content" data-dom-cache="true">
<div data-role="content" id ="page2-content" data-dom-cache="true">

So now it is working as per my requirement.

Hope this helps someone in future. :)

share|improve this answer
add comment

Perhaps breaking the form into smaller pieces would be best. Each page would have a form with an ID of form-part-#. When each form is submitted, it validates the current form, adds the form data to the last form as hidden elements, and then calls $.mobile.changePage();

share|improve this answer
Thanks for your response. I will have to do that if I don't find any other options. But the thing is I have around 100 fields in each form. And 15 such forms. So it would be better if I get a way to include a form itself in a Preview page rather than fields. –  Mystic Magic Mar 22 '13 at 4:30
You're asking a mobile user to fill out 1500 fields? That's quite a commitment, even if they are just scanning for boxes to check. –  Surreal Dreams Mar 22 '13 at 4:50
@SurrealDreams I am not asking the user to fill 1500 fields. It's client's requirement. They have so many fields to record. We can't reduce them :( –  Mystic Magic Mar 22 '13 at 4:57
If the client requires it, you have to deliver... I must give you credit for producing such a monster set of forms. Good luck when it comes to debugging, I hope it goes smoothly. –  Surreal Dreams Mar 22 '13 at 5:00
@SurrealDreams Thanks. I will need that for sure. Any idea about incuding pages dynamically? –  Mystic Magic Mar 22 '13 at 5:01
add comment

Your Answer


