In this article I will explain with an example, how to redirect to another Page with QueryString Parameters using JavaScript.
The multiple values to be passed to another Page will be added to the URL as QueryString parameters and then the Page will be redirected to another Page using window.location property in JavaScript.
 
 
Redirecting with QueryString Parameters using JavaScript
The following HTML Markup consists of an HTML TextBox, a DropDownList and a Button.
The Button has been assigned a JavaScript Click event handler which invokes the Send JavaScript function.
Inside the Send JavaScript function, the values of the TextBox and DropDownList are fetched and are encoded using the JavaScript encodeURIComponent function and added as QueryString parameters to a URL.
Finally, the page is redirected to the URL.
Name:
<input type="text" id="txtName" name="Name" value="Mudassar Khan" /><br />
<br />
Technology:
<select id="ddlTechnolgy" name="Technology">
    <option value="ASP.Net">ASP.Net</option>
    <option value="PHP">PHP</option>
    <option value="JSP">JSP</option>
</select>
<input type="button" value="Send" onclick = "Send()" />
<script type="text/javascript">
    function Send() {
        var name = document.getElementById("txtName").value;
        var tech = document.getElementById("ddlTechnolgy").value;
        var url = "Page2.htm?name=" + encodeURIComponent(name) + "&technology=" + encodeURIComponent(tech);
        window.location.href = url;
    };
</script>
 
 
Reading QueryString Parameters using JavaScript
The following HTML Markup consists of an HTML SPAN.
Inside the Window OnLoad event handler, the QueryString is extracted by splitting the URL of the current page using the Question mark (?) character.
Then a loop is executed and each QueryString parameter value is extracted by further splitting using the ampersand (&) character and the extracted values are decoded using the JavaScript decodeURIComponent function inserted as Key and Value pairs into an Array.
Finally, the QueryString parameter values are fetched from the Array using the name of the QueryString parameter i.e. the Key and displayed in HTML SPAN.
<span id="lblData"></span>
<script type="text/javascript">
    var queryString = new Array();
    window.onload = function () {
        if (queryString.length == 0) {
            if (window.location.search.split('?').length > 1) {
                var params = window.location.search.split('?')[1].split('&');
                for (var i = 0; i < params.length; i++) {
                    var key = params[i].split('=')[0];
                    var value = decodeURIComponent(params[i].split('=')[1]);
                    queryString[key] = value;
                }
            }
        }
        if (queryString["name"] != null && queryString["technology"] != null) {
            var data = "<u>Values from QueryString</u><br /><br />";
            data += "<b>Name:</b> " + queryString["name"] + " <b>Technology:</b> " + queryString["technology"];
            document.getElementById("lblData").innerHTML = data;
        }
    };
</script>
 
 
Screenshot
Redirect to another Page with QueryString using JavaScript
 
 
Browser Compatibility

The above code has been tested in the following browsers.

Internet Explorer  FireFox  Chrome  Safari  Opera 

* All browser logos displayed above are property of their respective owners.

 
 
Demo
View Demo
 
 
Downloads
Download Code
In this article I will explain with an example, how to redirect to another Page with QueryString Parameters using JavaScript.
The multiple values to be passed to another Page will be added to the URL as QueryString parameters and then the Page will be redirected to another Page using window.location property in JavaScript.
 
 
Redirecting with QueryString Parameters using JavaScript
The following HTML Markup consists of an HTML TextBox, a DropDownList and a Button.
The Button has been assigned a JavaScript Click event handler which invokes the Send JavaScript function.
Inside the Send JavaScript function, the values of the TextBox and DropDownList are fetched and are encoded using the JavaScript encodeURIComponent function and added as QueryString parameters to a URL.
Finally, the page is redirected to the URL.
Name:
<input type="text" id="txtName" name="Name" value="Mudassar Khan" /><br />
<br />
Technology:
<select id="ddlTechnolgy" name="Technology">
    <option value="ASP.Net">ASP.Net</option>
    <option value="PHP">PHP</option>
    <option value="JSP">JSP</option>
</select>
<input type="button" value="Send" onclick = "Send()" />
<script type="text/javascript">
    function Send() {
        var name = document.getElementById("txtName").value;
        var tech = document.getElementById("ddlTechnolgy").value;
        var url = "Page2.htm?name=" + encodeURIComponent(name) + "&technology=" + encodeURIComponent(tech);
        window.location.href = url;
    };
</script>
 
 
Reading QueryString Parameters using JavaScript
The following HTML Markup consists of an HTML SPAN.
Inside the Window OnLoad event handler, the QueryString is extracted by splitting the URL of the current page using the Question mark (?) character.
Then a loop is executed and each QueryString parameter value is extracted by further splitting using the ampersand (&) character and the extracted values are decoded using the JavaScript decodeURIComponent function inserted as Key and Value pairs into an Array.
Finally, the QueryString parameter values are fetched from the Array using the name of the QueryString parameter i.e. the Key and displayed in HTML SPAN.
<span id="lblData"></span>
<script type="text/javascript">
    var queryString = new Array();
    window.onload = function () {
        if (queryString.length == 0) {
            if (window.location.search.split('?').length > 1) {
                var params = window.location.search.split('?')[1].split('&');
                for (var i = 0; i < params.length; i++) {
                    var key = params[i].split('=')[0];
                    var value = decodeURIComponent(params[i].split('=')[1]);
                    queryString[key] = value;
                }
            }
        }
        if (queryString["name"] != null && queryString["technology"] != null) {
            var data = "<u>Values from QueryString</u><br /><br />";
            data += "<b>Name:</b> " + queryString["name"] + " <b>Technology:</b> " + queryString["technology"];
            document.getElementById("lblData").innerHTML = data;
        }
    };
</script>
 
 
Screenshot
Redirect to another Page with QueryString using JavaScript
 
 
Browser Compatibility

The above code has been tested in the following browsers.

Internet Explorer  FireFox  Chrome  Safari  Opera 

* All browser logos displayed above are property of their respective owners.

 
 
Demo
View Demo
 
 
Downloads
Download Code