Friday, 17 October 2014

JQuery: Send (Pass) Data (Values) from one page to another using Form Post

Hi friends,in this article I will explain about How to send Data (Values) from one page to another using Form Post.
The Source Page has an HTML Button 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 is set to the Destination page (Destinationpage.aspx). Using the AddParameter function values of the Name TextBox ,Qualification TextBox and the Technology DropDownList is appended to the Form as Hidden Fields and then the Form is submitted

SendDataUsingPostMethod.aspx
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>jQuery: Send (Pass) Data (Values) from one page to another using Form Post </title>
    <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#btnSubmit").click(function () {

                var $form = $("<form/>").attr("id", "frm")
                            .attr("action", "DestinationPage.aspx")
                            .attr("method", "post");
                $("body").append($form);


                AddParameter($form, "Name", $("#txtName").val());
                AddParameter($form, "Qualification", $("#txtQualification").val());
                AddParameter($form, "Technology", $("#ddlTechnology").val());


                $form[0].submit();
            });
        });
        function AddParameter(form, name, value) {
            var $input = $("<input />").attr("type", "hidden")
                                .attr("name", name)
                                .attr("value", value);
            form.append($input);
        }
    </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">
                    <input type="button" id="btnSubmit" value="Submit" />
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

DestinationPage.aspx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class DestinationPage : System.Web.UI.Page
{
    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>Get Values using Form Post Method</u><br /><br />");
                Response.Write("<b>Name:</b> " + Request.Form["Name"] + "<br />");
                Response.Write(" <b>Technology:</b> " + Request.Form["Technology"] + "<br />");
                Response.Write(" <b>Qualification:</b> " + Request.Form["Qualification"] + "<br />");
            }
        }
    }
}
DestinationPage.aspx.vb
Imports System.Collections.Generic
Imports System.Linq
Imports System.Web
Imports System.Web.UI
Imports System.Web.UI.WebControls

Partial Public Class DestinationPage
    Inherits System.Web.UI.Page
    Protected Sub Page_Load(sender As Object, e As EventArgs)
        If Not Me.IsPostBack Then
            If Not String.IsNullOrEmpty(Request.Form("Name")) AndAlso Not String.IsNullOrEmpty(Request.Form("Technology")) Then
                Response.Write("<u>Get Values using Form Post Method</u><br /><br />")
                Response.Write("<b>Name:</b> " + Request.Form("Name") + "<br />")
                Response.Write(" <b>Technology:</b> " + Request.Form("Technology") + "<br />")
                Response.Write(" <b>Qualification:</b> " + Request.Form("Qualification") + "<br />")
            End If
        End If
    End Sub
End Class


The output of the above code as shown in the below figure


When we click on Submit button then page will be redirected to DestinationPage.aspx with values which we send in previous page.



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.