Send Pass Data Values from one page to another using jQuery

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)

The HTML Markup consists of an HTML TextBox and an HTML Select (DropDownList). The values of the TextBox and DropDownList will be sent to another page in four different ways using jQuery.

Name:

<br />

Technology:

</select>

Destination Page (Page2.htm)

The HTML Markup consists of HTML SPAN (Label) for displaying the sent data.

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).

$(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.

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

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.

$(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.

$(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

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.

$(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.

$(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() + " <b>Technology:</b> " + parent.find("#ddlTechnolgy").val();

$("#lblData").html(data);

}

});

</script>

Screenshot

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.

$(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