Friday, 26 September 2014

How to Send (Pass) Data (Values) from one page to another using jQuery with QueryString

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" src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <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

© 2012-2014 Aspdotnet-Kishore.blogspot.com. All Rights Reserved.
The content is copyrighted to Kishore and may not be reproduced on other websites without permission from the owner.