Hi friends,in this article I will explain about How to Send (Pass) Data (Values) from one page to another
using jQuery with QueryString
The page
PassDataJQueryQueryString.aspx (Source Page), this is the
page from where we want to pass (send) data. This page consists of an TextBox
for Name ,TextBox for Qualification and DropDownList for Technology whose
values we need to pass (send) to the other page(DestinationPage.aspx).
Source Page(PassDataJQueryQueryString.aspx)
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>How to
Send (Pass) Data (Values) from one page to another using jQuery with
QueryString
</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#btnSubmit").click(function () {
var url = "DestinationPage.aspx?name="
+ encodeURIComponent($("#txtName").val())
+ "&Qualification=" +
encodeURIComponent($("#txtQualification").val())
+ "&technology=" + encodeURIComponent($("#ddlTechnology").val());
window.location.href = url;
return false;
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table>
<tr>
<td>
Name
</td>
<td>
:
</td>
<td>
<asp:TextBox ID="txtName"
runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
Qualification
</td>
<td>
:
</td>
<td>
<asp:TextBox ID="txtQualification"
runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
Technology
</td>
<td>
:
</td>
<td>
<asp:DropDownList ID="ddlTechnology" runat="server">
<asp:ListItem Value=".NET"
Text=".NET">
</asp:ListItem>
<asp:ListItem Value="Java"
Text="Java">
</asp:ListItem>
<asp:ListItem Value="PHP"
Text="PHP">
</asp:ListItem>
<asp:ListItem Value="SAP"
Text="SAP">
</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td colspan="3">
<asp:Button ID="btnSubmit"
runat="server"
Text="Submit"
/>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
|
Destination Page(DestinationPage.aspx):
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
var getData = new
Array();
$(function () {
if (getData.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]);
getData
[key] = value;
}
}
}
if (getData["name"]
!= null && getData["Qualification"] != null && getData["technology"]
!= null) {
var data = "<u>Values
in Previous Page</u><br /><br />";
var
name;
name =
getData["name"];
$("#lblName").html(name);
var qualification;
qualification
= getData["Qualification"];
$("#lblQualification").html(qualification);
var technology;
technology =
getData["technology"];
$("#lblTechnology").html(technology);
}
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table>
<tr>
<td>
Name
</td>
<td>
:
</td>
<td>
<asp:Label ID="lblName"
runat="server"></asp:Label>
</td>
</tr>
<tr>
<td>
Qualification
</td>
<td>
:
</td>
<td>
<asp:Label ID="lblQualification"
runat="server"></asp:Label>
</td>
</tr>
<tr>
<td>
Technology
</td>
<td>
:
</td>
<td>
<asp:Label ID="lblTechnology"
runat="server"></asp:Label>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
|
The output of the above code as shown in the below figure.
When you click on the Submit button as shown in the below figure.
You can download the code by clicking on the below Download image.
No comments:
Post a Comment