9

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:

<html>
    <head>
        <title>Title</title>
    </head>
    <body>    
        <div data-role="page" id="login-page">

        </div>

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

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

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

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.

Community
  • 1
  • 1
MysticMagicϡ
  • 28,593
  • 16
  • 73
  • 124
  • 2
    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. – MysticMagicϡ Mar 22 '13 at 04:12
  • I would look into html5 webstorage http://www.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

2 Answers2

5

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() {
    $('#divPage1Preview').html($('#page1-content').clone());
        $('#divPage2Preview').html($('#page2-content').clone());
});

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. :)

MysticMagicϡ
  • 28,593
  • 16
  • 73
  • 124
1

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

KPheasey
  • 1,765
  • 16
  • 22
  • 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. – MysticMagicϡ Mar 22 '13 at 04: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 04: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 :( – MysticMagicϡ Mar 22 '13 at 04:57
  • 2
    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 05:00
  • @SurrealDreams Thanks. I will need that for sure. Any idea about incuding pages dynamically? – MysticMagicϡ Mar 22 '13 at 05:01