Passing and retrieving multiple parameters in jquery from one page to another page

Question

I want to pass 4 names using jQuery from one page to another page using jQuery in winRT app. done using one parameter. How to pass multiple parameters and retrieve in 2nd page?

Coding for one parameter.

default.html:

<html>
<head>
<script>
       $(document).ready(function () {
        $(function () {
            $('#navigate12').click(function () {
                var te = $("#text1").val();
                var tea = $("#text2").val();
                 window.location.href = "/page.html?cal=" + te; 
                   });
        });});
</script>
</head>
<body>
 <button id="navigate12">navigate</button>
 <input id="text1" type="text"/>
 <input id="text2" type="text"/>
 <input id="text3" type="text"/>
 <input id="text4" type="text"/>
</body>
</html>

 page.html
<html>
<head>
      <script src="/js/jquery-1.9.1.js"></script>
      <script>
              $(document).ready(function () {                  
                function qs() {
                var qsparam = new Array();
                var query = window.location.search.substring(1);
                var parms = query.split('&');
                for (var i = 0; i < parms.length; i++) {
                    var pos = parms[i].indexOf('=');
                    if (pos > 0)
                    {
                        var key = parms[i].substring(0, pos);
                        var val = parms[i].substring(pos + 1);
                        qsparam[key] = val;
                    }

                }
               var msg = new Windows.UI.Popups.MessageDialog(val);
               msg.showAsync();
             } 
               var splitstr = qs();
                    });
</script>
<title>
</title>
</head>
<body>

</body>
</html>

keep in mind when you don't use the navigation framework and instead window.location you lose navigation state and you don't get transistions between pages. The navigation framework also stores your values passed between pages, any reason you aren't using it? — Adam Tuliper, Jun 12 '13 at 07:22

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

You can pass GET parameters to a page using "?param=foo" for the first parameter. Additional parameters are included with "&" instead of "?".

Since you are passing GET parameters, you can put them all in the URL and read them in your target page. Alternatively, you can use POST parameters instead.

Here's a reference on GET vs PUT parameters:

http://www.w3schools.com/tags/ref_httpmethods.asp

If you are passing all parameters as GET, you can expand this bit:

var te = $("#text1").val();
var tea = $("#text2").val();
window.location.href = "/page.html?cal=" + te;

to something like this:

var te = $("#text1").val();
var text2 = $("#text2").val();
var text3 = $("#text3").val();
var text4 = $("#text4").val();
window.location.href = "/page.html?cal=" + te + "&text2=" + text2 + "&text3=" + text3 + "&text4=" + text4;

As for obtaining the parameters in the other page: I am assuming that you want to obtain the GET parameters in the other page via jQuery, since your target page is plain HTML. If this is the case, check this question

score 8 · Accepted Answer · answered Jun 09 '13 at 11:14

done using this technique in default.html

$(function () {
               $('#navigate12').click(function () {
                var te = $("#text1").val();
                var text2 = $("#text2").val();
                var text3 = $("#text3").val();
                var text4 = $("#text4").val();
                window.location.href = "/page.html?cal=" + te + "&text2=" + text2 +
               "&text3=" + text3 + "&text4=" + text4; <-- this line has changes to include multiple parameters rest is same as in the question

and in page.html

    <script>
              $(document).ready(function () {                  
              function qs() {
                var qsparam = new Array(10);
                var query = window.location.search.substring(1);
                var parms = query.split('&');
               for (var i = 0; i < parms.length; i++) {
               var pos = parms[i].indexOf('=');
               if (pos > 0)
              {
                        var key = parms[i].substring(0, pos);
                        var val = parms[i].substring(pos + 1);
                        qsparam[i] = val;    
              }                          
                                                       }
               text1.value = qsparam[0];
               text2.value = qsparam[1];
               text3.value = qsparam[2];
               text4.value = qsparam[3];



              }
              var splitstr = qs();



                    });
    </script>
    <title></title>
</head>
<body>
   <input id="text1" type="text" />
    <input id="text2" type="text" />
   <input id="text3" type="text" />
    <input id="text4" type="text" />
 </body>
 </html>

we are calling the function qs() using

var splitstr = qs();

it splits the parameters and to see the value of different variable u can use text1.value=parms if any doubt u can ask :-)

score 0 · Answer 3 · edited May 23 '17 at 12:23

Here is a detailed answer on how different methods of how to retrieve parameters from the query string with or without jQuery:

How can I get query string values in JavaScript?

For example:

function getParameterByName(name) {
    name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
    return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}

score 0 · Answer 4 · edited Jun 09 '17 at 12:28

0

sending value like below

window.location.href = "testlocation.aspx?Id=" + tickerCode.label + "&Id2=" + financialYear.label;

and receive like below..

function getActualYear() {
    var Id = getParameterByName('Id');
    var Id2 = getParameterByName('Id2');
    console.log('Id=' + Id);
    console.log('Id2=' + Id2);
}

function getParameterByName(id) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
    results = regex.exec(location.search);
    return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}

edited Jun 09 '17 at 12:28

Suprabhat Biswal

3,033
1
21
29

answered Jun 09 '17 at 11:14

Mohit Jariwal

71
1
2

here i have mentioned parameter send and receive for window.location.href mehod... – Mohit Jariwal Jun 09 '17 at 11:15
replace function input param from id to name. you are misleading people – Amin Setayeshfar Jun 26 '17 at 18:24

Passing and retrieving multiple parameters in jquery from one page to another page

4 Answers4