Javascript storing Variable for next page use

Question

The javascript as below is used to show / hide forms in the login page. I have a Create an Account and Login button from another page called (Promo page). When the user press Login, It will load accordingly because it is set to load the login form by default but when the User click Create an account, i want it to load the create an account form instead.

This JS is only loaded in the Login page, not the promo page. I'm new to JS and would like to seek for advice on the right method to proceed with this loading.

eg Saving a variable if the Create button is clicked from Promo page and detect it when page is loaded? etc

Script for Login Page

  <script>

jQuery(document).ready(function() {     
  App.init();
  Login.init();
});

Script Loaded in Load in page after above code

    var Login = function () {

    return {
        //main function to initiate the module
        init: function () {

                invalidHandler: function (event, validator) { //display error alert on form submit   

                },

                highlight: function (element) { // hightlight error inputs
                    $(element)
                        .closest('.control-group').addClass('error'); // set error class to the control group
                },

                success: function (label) {
                    label.closest('.control-group').removeClass('error');
                    label.remove();
                },

                errorPlacement: function (error, element) {
                    error.addClass('help-small no-left-padding').insertAfter(element.closest('.input-icon'));
                },

                submitHandler: function (form) {
                    window.location.href = "index.html";
                }
            });

            $('.forget-form input').keypress(function (e) {
                if (e.which == 13) {
                    if ($('.forget-form').validate().form()) {
                        window.location.href = "index.html";
                    }
                    return false;
                }
            });

            jQuery('#forget-password').click(function () {
                jQuery('.login-form').hide();
                jQuery('.forget-form').show();
            });

            jQuery('#back-btn').click(function () {
                jQuery('.login-form').show();
                jQuery('.forget-form').hide();
            });



                invalidHandler: function (event, validator) { //display error alert on form submit   

                },

                highlight: function (element) { // hightlight error inputs
                    $(element)
                        .closest('.control-group').addClass('error'); // set error class to the control group
                },

                success: function (label) {
                    label.closest('.control-group').removeClass('error');
                    label.remove();
                },

                errorPlacement: function (error, element) {
                    if (element.attr("name") == "tnc") { // insert checkbox errors after the container                  
                        error.addClass('help-small no-left-padding').insertAfter($('#register_tnc_error'));
                    } else {
                        error.addClass('help-small no-left-padding').insertAfter(element.closest('.input-icon'));
                    }
                },

                submitHandler: function (form) {
                    window.location.href = "index.html";
                }
            });

            jQuery('#register-btn').click(function () {
                jQuery('.login-form').hide();
                jQuery('.register-form').show();
            });

            jQuery('#register-back-btn').click(function () {
                jQuery('.login-form').show();
                jQuery('.register-form').hide();
            });
        }

    };

}();

post only the code relevant to the question, not your entire file. — jbabey, Jun 09 '13 at 16:20

Skarlinski · Accepted Answer · 2013-06-12T16:32:12.300

1

Firstly, it would be better to move the script to a dedicated file, and call it on all relevant pages with .

This way you wont have to repeat code, and relevant pages will load it.

Secondly, I dont think you can reliably keep data from javascript between refreshes.

You can pass the data by using GET in the url or saving data on server side session or cookie, with ajax.

edited Jun 12 '13 at 16:32

answered Jun 09 '13 at 16:40

Skarlinski

2,419
11
28

Maybe the OP would prefer a *cookie instead? – Gary Jun 10 '13 at 02:22

score 1 · Answer 2 · edited May 23 '17 at 11:46

It seems to me that what you are wondering about is a rough approach to Single Page Applications. See more details here: JavaScript SPA-Frameworks (Single Page Application)

Honestly, I do not advice it for beginners. You could break down your code to user multiple pages (login page and promo page) and exchange variables via hidden attributes, session variables, cookies, or load via Ajax calls.

Javascript storing Variable for next page use

2 Answers2