In this article I will explain with an example, how to send (pass) values (data) from
one page to
another in four different ways using
jQuery.
The four ways to send (pass) values (data) from
one page to
another using
jQuery are
1. QueryString Parameter
2. Cookies
3. Popup Window
4. Form Post
HTML Markup
Source Page (Default.htm)
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
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>
Destination Page (Page2.htm)
The
HTML Markup consists of
HTML SPAN (Label) for displaying the sent data.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<span id="lblData"></span>
Screenshot
![Send (Pass) Data (Values) from one page to another using jQuery]()
1. QueryString
Pros: Nothing as such.
Cons: Data is visible in URL.
Source Page
The
Source Page consists of an
HTML Button assigned with a
jQuery Click event handler.
When the
Button is clicked, the values of the
Name TextBox and the
Technology DropDownList are set as
QueryString Parameters and then the page is redirected to the Destination page (Page2.htm).
<input type="button" id="btnQueryString" value="Send" />
<script type="text/javascript">
$(function () {
$("#btnQueryString").bind("click", function () {
var url = "Page2.htm?name=" + encodeURIComponent($("#txtName").val()) + "&technology=" + encodeURIComponent($("#ddlTechnolgy").val());
window.location.href = url;
});
});
</script>
Destination Page
Inside the
jQuery document ready 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.
<script type="text/javascript">
var queryString = new Array();
$(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"];
$("#lblData").html(data);
}
});
</script>
Screenshot
![Send (Pass) Data (Values) from one page to another using jQuery]()
2. Cookies
Pros: Data is hidden in Cookie.
Cons: Cookies can be disabled in browser by the end user.
Note: This method will work only if Cookies are enabled in browser.
Source Page
The Source Page consists of an
HTML Button assigned with a
jQuery Click event handler.
When the
Button is clicked, the values of the
Name TextBox and the
Technology DropDownList are assigned to Cookies and then the page is redirected to the Destination page (Page2.htm).
Note: In order to read and write Cookies, jQuery Cookie plugin has been used.
<input type="button" id="btnCookie" value="Send" />
<script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.cookie/1.3.1/jquery.cookie.js"></script>
<script type="text/javascript">
$(function () {
$("#btnCookie").bind("click", function () {
$.cookie("name", $("#txtName").val());
$.cookie("technology", $("#ddlTechnolgy").val());
window.location.href = "Page2.htm";
});
});
</script>
Destination Page
Inside the
jQuery document ready event handler, the values are fetched from the Cookies using the
jQuery Cookie plugin and displayed in
HTML SPAN.
<script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.cookie/1.3.1/jquery.cookie.js"></script>
<script type="text/javascript">
$(function () {
if ($.cookie("name") != null && $.cookie("technology") != null) {
var data = "<u>Values from Cookies</u><br /><br />";
data += "<b>Name:</b> " + $.cookie("name") + " <b>Technology:</b> " + $.cookie("technology");
$("#lblData").html(data);
$.removeCookie("name");
$.removeCookie("technology");
}
});
</script>
Screenshot
![Send (Pass) Data (Values) from one page to another using jQuery]()
3. Popup Window
Pros: Controls are accessed so no need to send data.
Cons: Opens up a new window or tab.
Source Page
The Source Page consists of an
HTML Button assigned with a jQuery
Click event handler.
When the Button is clicked, the Destination page (Page2.htm) is opened as Popup Window.
<input type="button" id="btnPopup" value="Send" />
<script type="text/javascript">
$(function () {
$("#btnPopup").bind("click", function () {
window.open('Page2.htm');
});
});
</script>
Destination Page
Inside the
jQuery document ready event handler, the values of the
Name and
Technology are fetched from their respective controls by accessing the Parent Page window.
Finally, the values are displayed in
HTML SPAN.
<script type="text/javascript">
$(function () {
if (window.opener != null && !window.opener.closed) {
var parent = $(window.opener.document).contents();
var data = "<u>Values using Popup Window</u><br /><br />";
data += "<b>Name:</b> " + parent.find("#txtName").val() + " Technology: " + parent.find("#ddlTechnolgy").val();
$("#lblData").html(data);
}
});
</script>
Screenshot
![Send (Pass) Data (Values) from one page to another using jQuery]()
4. Form Post
Pros: Best in class as there is 100% guarantee of data being send that too in hidden form.
Cons: Requires Server side technology for fetching posted data.
Note: With this method we can only send data via
jQuery but for receiving we will need some sever side technology like
ASP.Net, PHP, JSP, etc. Here I am explaining using
ASP.Net and C#.
Source Page
The Source Page consists of an
HTML Button assigned with a
jQuery Click event handler.
When the Button is clicked, an
HTML Form is created and appended to the BODY Tag of the page.
The action attribute is set to the Destination page (Page2.aspx).
Then using the
AddParameter JavaScript function, the values of the
Name TextBox and the
Technology DropDownList are appended to the Form using
Hidden Field elements and then the Form is submitted.
<input type="button" id="btnPost" value="Send" />
<script type="text/javascript">
$(function () {
$("#btnPost").bind("click", function () {
//Create a Form
var $form = $("<form/>").attr("id", "data_form")
.attr("action", "Page2.aspx")
.attr("method", "post");
$("body").append($form);
//Append the values to be send
AddParameter($form,"name", $("#txtName").val());
AddParameter($form,"technology", $("#ddlTechnolgy").val());
//Send the Form
$form[0].submit();
});
});
function AddParameter(form, name, value) {
var $input = $("<input />").attr("type", "hidden")
.attr("name", name)
.attr("value", value);
form.append($input);
}
</script>
Destination Page
Inside the
Page Load event, the values of the
Name TextBox and the
Technology DropDownList are fetched using the
Request.Form collection and are printed on the page using the
Response.Write function.
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
if (!string.IsNullOrEmpty(Request.Form["name"]) && !string.IsNullOrEmpty(Request.Form["technology"]))
{
Response.Write("<u>Values using Form Post</u><br /><br />");
Response.Write("<b>Name:</b> " + Request.Form["name"] + " <b>Technology:</b> " + Request.Form["technology"]);
}
}
}
Screenshot
![Send (Pass) Data (Values) from one page to another using jQuery]()
Browser Compatibility
* All browser logos displayed above are property of their respective owners.
Demo
Downloads
