How to pass the data from one html to another html page using JavaScript in Phonegap?

Question

I have created two HTML pages page1.html and page2.html . In page1.html ,I have three text fields and one submit button and in page2.html i have a list view. So, when i fill the texts and clicked on submit button in page1.html ,the data should come in list view. Please assist me. Thanks in advance

Answer 1

SOLUTIONs :

(1) . Loading page2 html element into your current DOM is also possible but you need to learn about this,** How the DOM is handled by the JQM ?

EXAMPLE : Consider two HTML file named has first and second and each file consist of five page . At the time of loading only the first html file will loaded into DOM fully even though the first page in the file is shown to you , rest of the page's will be hidden and partially loaded by JQM. Till now everything is ok but once you try to navigate page in different file, there's a lock.

For example ,now you are in page 1(first.html), trying to navigate page 3 in second file using ($.mobile.load..). It simply load the page 3 HTML element from second file into current DOM rest of them (including that page event) will be ignored.

(2). Using localStorage is best for passing value to external file.

Code :

page1.httml

var listvalues = { "1": "value1", "2": "value2", "3": "value3" }
*// OR IF INTPUT IS INSIDE FORM BETTER USER JQUERY SERIALIZER var listvalues = $("#form").serialize();*
    localStorage.setItem('lists', JSON.stringify(listvalues)); 

page2.html

var listvalues = localStorage.getItem('lists');
//pase the value 
var finalvalue = JSON.parse(listvalues);
// it look like this { "1": "value1", "2": "value2", "3": "value3" };

(3). You can also try sessionStorage to do the same.,

(4). If it is multi-page architecture try using global variable by declaring variable in common file.

Answer 2

In the page1.html script you can pass the textfields values through URL(GET) method handle through script and access it in page2.html like the following.

page1.html:

$(#submit').click(function{
   window.location.href="page2.html?text1="+$('#text1').val()...etc
});

page2.html:

$(document).ready(function(){
 var idx = document.URL.indexOf('?text1=');
 if (idx !== -1) {
    //take each textfield values from the "document.URL" using substring function
 }
});

Answer 3

// page1.html
// build an object
window.onload = function() {
    var form = document.getElementById("my-form");        
    form.submit.onclick = function() {
        var obj = {};
        obj.full_name = form.full-name; // string
        obj.age = form.age;         // number
        obj.location = form.location;   // string     
        // store it into locale storage as a string
        localStorage.setItem("obj", JSON.stringify(obj));
        form.submit();
    }
}
// page2.html
// retrieve it back from storage 
var obj = localStorage.getItem("obj");
// use it
console.log(JSON.parse(obj));
// or
// for (var prop in obj) { console.log(obj[prop]); }