JavaScript window.location.search 02

In the previous sample we learnt the JavaScript code for window location search property that returns the QueryString parameters from the current URL of the web browser. In this sample we will learn how to get the QueryString variables and their values separately. We have used JavaScript Substring Function, Split function and an Array collection to store the variable names and values.

Try the sample code below to learn the advanced JavaScript logic to extract the QueryString parameters from the URL:

Edit this code and click update to view output

<html>
<head>
    <title>Javascript Window Location Search 02</title>
    
    <script type="text/javascript" language="javascript">
    function LocationSearch()
    {
        var queryString = new String();
        queryString = window.location.search;

queryString = queryString.substring(1);
    
        document.getElementById("div1").innerHTML = "<b>VariableName + Values:</b> " + queryString + "<br />";

var arr1 = new Array();     
        arr1 = queryString.split("&");
     
        var arr2 = new Array();

for(var i = 0; i<arr1.length; i++)
        {
            arr2[i] = arr1[i].toString().substring(arr1[i].toString().indexOf("=") + 1);
            arr1[i] = arr1[i].toString().substring(0,arr1[i].toString().indexOf("="));
        }

document.getElementById("div1").innerHTML += "<b>VariableNames:</b> " + arr1.concat() + "<br />";
        
        document.getElementById("div1").innerHTML += "<b>Values:</b> " + arr2.concat();
    }
     
    function setLocationSearch(valueObj)
    {
        window.location.search = valueObj;
    }
    </script>

</head>
<body>
    <p> 
        <b>First of all click this button to set the query string values:</b><br />
        <input type="button" id="Button1" value="Set Search String Variables" onclick="setLocationSearch('?q1=value1&q2=value2&q3=value3');" /> 
    </p>
    
    <br />
    
    <div id="div1"></div>
    
    <br />
    
    <p>
        <input type="button" id="btn" value="Get Search Substrings" onclick="LocationSearch();" /> 
    </p>
</body>
</html>

OUTPUT:

Get Code for this sample...

Previous Sample

Next Sample