Introduction: Hello Guys, “Welcome back” Today i am here with another one new great article. In this article I will explain about how to find the value of Query String parameters from one page to another page by using JavaScript.There is no direct function or utility available to read Query String parameter values in JavaScript. In this article I will explain that how to analyze the URL of the page and then catch the value of Query String parameter by using JavaScript.
Pass Query String parameters using JavaScript
On the HTML page I am placing Three controls one is Textbox, second is DropDownList and third one is Button. On Click event handler of the Button I assigned a Javascript function. Inside the Javascript function, the values of the TextBox and DropDownList will be catch inside the URL and this will be encoded using the JavaScript encodeURIComponent function and combined as Query String parameters to a URL.
Finally, the page is redirected to the URL.
Name:
<input type="text" id="txt_name" name="Name" value="Sanjeev Kumar " /><br />
<br />
Companies:
<select id="dropdown_companies" name="Companies">
<option value="Bata">Bata</option>
<option value="PUMA">PUMA</option>
<option value="Reebok">Reebok</option>
</select>
<input type="button" value="Send" onclick="Send()" />
<script type="text/javascript">
function Send() {
var name = document.getElementById("txt_name").value;
var tech = document.getElementById("dropdown_companies").value;
var url = "Page2.htm?name=" + encodeURIComponent(name) + "&Companies=" + encodeURIComponent(tech);
window.location.href = url;
};
</script>
Find QueryString parameters using JavaScript
On this HTML page I am using control named Span.
Inside the find_Query String function, the Query String is find by cracking the link or URL of the current page by using the character or sign question mark(?) .
Then for loop will be worked and each parameter of Query String will be find the values using the ampersand (&) sign or character and the extracted values are decoded using the JavaScript decodeURIComponent function inserted as Key and Value pairs into an Array.
Finally, the Query String parameter values are fetched from the Array using the name of the Query String parameter i.e. the Key and displayed in HTML SPAN.
<span id="lblData"></span>
<script type="text/javascript">
window.onload = function () {
var queryString = find_QueryString();
if (queryString["name"] != null && queryString["companies"] != 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;
}
};
function find_QueryString () {
var queryString = new Array();
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;
}
}
return queryString;
};
</script>
Here i am giving the complete code for HTML page named Default. You can copy and paste the code on your HTML page and enjoy the execution of the code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
body { font-family: Arial; font-size: 10pt; }
</style>
</head>
<body>
Name:
<input type="text" id="txt_Name" name="Name" value="Sanjeev Kumar" /><br />
<br />
Company:
<select id="ddl_company" name="Company">
<option value="BATA ">BATA</option>
<option value="PUMA">PUMA</option>
<option value="REEBOK">REEBOK</option>
</select>
<input type="button" value="Send" onclick="Send()" />
<script type="text/javascript">
function Send() {
var name = document.getElementById("txt_Name").value;
var comp = document.getElementById("ddl_company").value;
var url = "Page2.htm?name=" + encodeURIComponent(name) + "&company=" + encodeURIComponent(comp);
window.location.href = url;
};
</script>
</body>
</html>
Here i am giving the complete code for HTML page named page2. You can copy and paste the code on your HTML page and enjoy the execution of the code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
body { font-family: Arial; font-size: 10pt; }
</style>
</head>
<body>
<span id="lblData"></span>
<script type="text/javascript">
window.onload = function () {
var queryString = GetQueryString();
if (queryString["name"] != null && queryString["Company"] != null) {
var data = "<u>Fetched value of QueryString From Last Page</u><br /><br />";
data += "<b>Name:</b> " + queryString["name"] + " <b>Company:</b> " + queryString["company"];
document.getElementById("lblData").innerHTML = data;
}
};
function GetQueryString() {
var queryString = new Array();
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;
}
}
return queryString;
};
</script>
</body>
</html>
Conclusion: In above code, I have been explained that how to find the value of Query String parameters from one page to another page by using JavaScript. This code is very helpful for every developer. Bye Bye and take care of yourself Developers. We will come back shortly with the new article.
Regards
Using Asp.net
No comments:
Post a Comment