CODEWITHSUNDEEP
formsjquery-mobile
Christn
Christn

Reputation: 41

JQuery-mobile multipage forms

I have a main page which has multiple links to a second page. Depending on the link clicked, the second page needs to display a different header (this part I've done). On the new page, is a form. This form needs to be able to save the input to localStorage.

My problem is that I don't know how to make the form act like several forms (since there are about 5 different links). The user should just see the same form (in terms of looks), but the form needs to save the data for that specific page.

Say, I have links A, B, C on my homepage. These take the user to the same #page2. On #page2 is a form, a link to save form data to localStorage, and a link to retrieve form data. The user needs to be able to save a number of records for link A and B and C (when the user views form data from link A, it should give them at least the past half a dozen entries for A).

How would I be able to achieve the above?

Upvotes: 0

Views: 24

Answers (1)

ezanker
ezanker

Reputation: 24738

As everything is happening in one html page, you could just have a global javascript variable for current form or set it as a data-attribute on the page2 div. Each time you click a link, as well as setting up the header of page 2, set the global variable to the form. Then when saving the form, use the global variable to specify a unique localstorage id.

For example, if you have 3 links like this:

  <div data-role="navbar" id="thenav">
      <ul>
        <li><a href="#page2" data-formid="form1" data-header="The Form 1">Form1</a></li>
        <li><a href="#page2" data-formid="form2" data-header="The Form 2">Form2</a></li>
        <li><a href="#page2" data-formid="form3" data-header="The Form 3">Form3</a></li>
      </ul>
  </div>

And page 2 

<div data-role="page" id="page2">
     <div data-role="header" id="page2header" data-add-back-btn="true">
        <h1>My page 2</h1> 
    </div>  
    <div id="cont" role="main" class="ui-content">
      <label for="text-basic">Text input:</label><input type="text" name="text-basic" id="text-basic" value="">
      <button id="btnSave">Save</button>
    </div> 
</div>

Then in script

var formid = '';
$(document).on("pagecreate","#page1", function(){ 
    $("#thenav a").on("click", function(e){
    $("#page2header h1").text($(this).jqmData("header"));
    formid = $(this).jqmData("formid")
  });
});  

$(document).on("pageshow","#page2", function(){ 
  //get from locastorage
  $("#text-basic").val("");
  var t = localStorage.getItem(formid);
  if (t && t != "undefined"){
    $("#text-basic").val(t);
  }
}); 

$(document).on("pagecreate","#page2", function(){ 
    $("#btnSave").on("click", function(e){
    //save to local storage
    var t = $("#text-basic").val();
    localStorage.setItem(formid, t);
    $( ":mobile-pagecontainer" ).pagecontainer( "change", "#page1", {  } );
  });
})

DEMO

Upvotes: 1

Related Questions