Passing a var to another page

Question

Is it possible to pass the totalScore var to another page onclick so that it can be displayed there? ex: click submit link it goes to yourscore.html and display the score on page

$("#process").click(function() {   
    var totalScore = 0;
    $(".targetKeep").each( function(i, tK) {
       if (typeof($(tK).raty('score')) != "undefined") {
          totalScore += $(tK).raty('score');
       }
    });
    alert("Total Score = "+totalScore);
});

You would need to add it as a query string parameter, or possibly a cookie. — CodingGorilla, Sep 17 '13 at 17:03
which variable you want to access in this page yourscore.html — S. S. Rawat, Sep 17 '13 at 17:41

score 2 · Accepted Answer · edited May 23 '17 at 12:11

Let we suppose that your HTML may be as follows:

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

  <script>
    $(document).ready(function(){

      $("#process").click(function() {   
        var totalScore = 0;
        /*
         Your code to calculate Total Score
         Remove the next line in real code.
        */
        totalScore = 55; //Remove this

    alert("Total Score = "+totalScore);
      $("#submit-link").attr('href',"http://example.com/yourscore.html?totalScore="+totalScore);  
});


    });
  </script>

<meta charset=utf-8 />
<title>JS Bin</title>

</head>
<body>
  <button id="process">Process</button>
<br />
<a href="#" id="submit-link">Submit Total Score</a>

</body>
</html>

Check out this DEMO

In yourscore.html you may able to know more in the following queation to extract the URL parameter from the URL:

Parse URL with jquery/ javascript?

Jason · Answer 2 · 2013-09-17T17:50:51.067

1

This is generally done by changing the url of the page. i.e. if you are going go to a new page, just do:

http://example.com/new/page?param1=test

If the page already exists in a new window (like a popup that you own), set the url to something new:

http://example.com/new/page#param

Open a window:

 var win = window.open('http://example.com/new/page?totalscore'+totalscore,'window');

Change the location:

 win.location.href='http://example.com/new/page?totalscore'+totalscore;

Other ways of doing this could be websockets or cookies or localstorage in HTML5.

edited Sep 17 '13 at 17:50

answered Sep 17 '13 at 17:03

Jason

13,563
15
74
125

how would I pass the `totalscore` var down to a link is it something like http://example.com/new/score.html?totalscore also how would grab totalscore on the new page? – acctman Sep 17 '13 at 17:20
@acctman You can find how to handle querystring in this post http://stackoverflow.com/questions/901115/how-can-i-get-query-string-values – Warlock Sep 17 '13 at 17:35
@Jason but the score it held inside the `totalscore` var. totalscore=1000 would work for manually setting a score right? – acctman Sep 17 '13 at 17:35
1

window.location = "domain.com/path/to/page?totalscore="+totalscore; – Jason Sep 17 '13 at 17:43
i commented out the alert and added `win.location.href='LP3.html?totalscore'+totalscore;` but when i click my link `FINISH` nothing happens. – acctman Sep 17 '13 at 18:01

score -1 · Answer 3 · answered Sep 17 '13 at 17:07

if you are aiming to support more modern browsers the elegant solution could be to use sessionStorage or localStorage! Its extremely simple and can be cleared and set as you need it. The maximum size at the low end is 2mb but if your only storing INTs then you should be okay.

DOCS: http://www.html5rocks.com/en/features/storage http://dev.w3.org/html5/webstorage/

DEMO: http://html5demos.com/storage

EXAMPLE:

addEvent(document.querySelector('#local'), 'keyup', function () {
  localStorage.setItem('value', this.value);
  localStorage.setItem('timestamp', (new Date()).getTime());
  //GO TO YOUR NEXT PAGEHERE
});

i like this because the passed info will not appear in any coffee shop's http log like a GET param would... — dandavis, Sep 17 '13 at 18:38

Passing a var to another page

3 Answers3