2

I am beginner in Javascript. I am currentlyworking on a Phonegap app with it. I am stuck in between as I have 4 html pages for signup process, and I have to pass all the html pages input value to single js file as in final all data must be POSTed to server URL and also I have read on many sites that they have recommended using same js file for all the pages of your site to speed up the site. So I have two problems to solve. I searched on many sites but could not find the accurate answer.

  1. I need to pass 4 html page's input value to single js file.

  2. I have to make single js file for both sign-in and sign-up.

My codes for JS page is:

var firstName="";
var lastName="";
var email="";
var password="";
var retypePassword="";
var gender="";
var DOB="";
var institute="";
var course="";
var branch="";
var semester="";
var teachers = [];

function signUpStarting() {
    alert(firstName + " "+lastName+" "+email+" "+password+" "+retypePassword+" "+gender+" "+DOB+" "+institute+" "+course+" "+branch+" "+semester+" "+teachers.join(","));

}   

function signUp1() {
    firstName[0] = $("#first_name").val().trim();
    firstName[1] = $("#last_name").val().trim();
    email = $("#email").val().trim();
    password = $("#password").val();
    retypePassword = $("#retype_password").val();   
    alert(firstName + " "+lastName+" "+email+" "+password+" "+retypePassword);
}

function signUp2() {
    gender = $('#gender').find(":selected").text();
    DOB = $('#DOB').val();
    alert(gender+" "+DOB);
}

function signUp3() {
    institute = $('#institute').find(":selected").text();
    course = $('#course').find(":selected").text();
    branch = $('#branch').find(":selected").text();
    semester = $('#semester').find(":selected").text();
    alert(institute+" "+course+" "+branch+" "+semester);
}

function signUp4() {
    $(":checkbox" ).map(function() {
            if($(this).is(':checked')){
                    teachers.push($('label[for="' + this.id + '"]').text());
            }
    });
    signUpStarting();
}

In html pages I am calling JS functions for each pages:

On first page:

<a onclick="signUp1()" href="register-two.html">continue</a>

On second page:

<a onclick="signUp2()" href="register-three.html">continue</a>

On third page:

<a onclick="signUp3()" href="register-four.html">continue</a>

On fourth page:

<a onclick="signUp4()">continue</a>

On each transaction from one page to next I have set alert in JS, and I am getting alert with accurate values also. But after clicking the continue button from fourth page of html, I transferred the code to main signup function. I tried to see alert in signUpStarting() function but there I am getting response of just fourth page values and other values are showing nothing as the variables are null.

I am not getting how to save variable values for always without using localStorage or cookies and POSTing all data to server.And I think this would have been easier if I would know to code for all html pages for my site to single JS file.

Please help me !

Swr7der
  • 849
  • 9
  • 28
  • I would do this server side if you are going between pages, otherwise I would load the next step in using ajax – Pete Sep 19 '16 at 10:40
  • ajax variables don't delete or change in transferring to different pages? – Swr7der Sep 19 '16 at 11:21
  • You don't actually change page if you use ajax - the ajax does the loading of then new content without the need to move off the current page. Have a read of this: http://stackoverflow.com/questions/1510011/how-does-ajax-work – Pete Sep 19 '16 at 12:29

1 Answers1

3

I am not getting how to save variable values for always without using localStorage or cookies and POSTing all data to server.And I think this would have been easier if I would know to code for all html pages for my site to single JS file.

This is exactly right. You cannot store data in memory between page loads in a web browser environment because all javascript variables are naturally destroyed when the browser navigates away from the page to a new page (even if they use the same javascript on both pages). Thus, you have to save it somewhere with more permanence: localStorage, cookies, or on the server via POST or GET.

What I would recommend is scrapping the four different html pages and simply using one html page that changes dynamically as the user fills in data. This way the browser will not eliminate data before you are ready to POST it to the server.

user2005218
  • 193
  • 1
  • 9
  • Yup ! Merging html files in same file would be good but the problem is , Can't I use a simple js file for all the html pages? If yes then how? – Swr7der Sep 19 '16 at 10:41
  • I'm not sure what you mean but the only way to share state between different html pages is to store the values in a store that outlives the page: cookies, sessiondata or on the server. For using the same JS file on each HTML page, is that not already what you are doing? Something like ``? – user2005218 Sep 19 '16 at 10:46
  • I meant with "how would I use same js files for multiple pages" was I wanted to use different functions for different files and in this file (for 4 html pages) I got conflict so I thought there might be some other way so that variables won't change even after calling same file again and again. That's the problem. Is there any professional way for doing that? like $(document).ready(function()) using or some other function ?? OR I can use ajax variables for doing that ? As I don't want to POST data to server again and again. – Swr7der Sep 19 '16 at 11:28
  • Ajax will query the server to store its data. Storing it in cookies or sessionStorage would save it in the user's browser so if you insist on keeping separate HTML pages and want to avoid hitting the server too much then I would suggest that route. There is no other way to keep the data alive between HTML pages because the browser is designed to throw it all away each time you navigate to another HTML document. The exception to this is with iframes but that is very similar to merging your html files. – user2005218 Sep 19 '16 at 11:55
  • Thank you so much! I used localStorage for saving all the data and from the last page I would send all data to server. This won't make any conflict, right? I mean this can be used for working on a big project? like data won't get lost until the app is running? or any other conflict with it? @user2005218 – Swr7der Sep 28 '16 at 18:25
  • This should be okay but you should be aware that there are limits to localStorage capacity (about 5-10MB). So, if your application uses it a lot it may run out of space. To help mitigate this you should [clear data as soon as you're done with it](https://developer.mozilla.org/en-US/docs/Web/API/Storage/removeItem). As always, you should be careful about namespace pollution as well. It's possible that another part of your project could write to the same key in localstorage and cause issues. – user2005218 Sep 28 '16 at 21:30
  • I get it , Thanks for the help! :) – Swr7der Sep 29 '16 at 05:37