Thursday, July 4, 2013

How to get values from a pop up window in asp.net step by step

Hello,

Here I'm explaining how to get a textbox value from a popup window and set in parent textbox.

This is very easy but you need some knowledge in javascript and html

I can explain this in some steps.

Step1: Add a new page to your project, which is the parent page.

Step2: Add one more page which is pop up page.

Step3: Add One textbox and one button in each form.

Step4: Put this following java script code in your parent page.
          <script type="text/javascript">
        function viewpopup() {
            window.open("popup.aspx", "Test Window", "width=400,height=600");
        }
    </script>
Step5: Put this following java script code in your pop up page.
           <script type="text/javascript">
        function setvalue() {
            opener.document.getElementById("TextBox1").value = document.getElementById("txtSample").value;
            this.window.close();
        }
    </script>
Step6: Add both functions in button click event in each page.

Step7: Run it and enjoy....

You can refer the following codes for reference.


 Parent.aspx

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
        function viewpopup() {
            window.open("popup.aspx", "Test Window", "width=400,height=600");
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <input type="button"  runat="server" value="Show Popup" onclick="viewpopup()" />

    </div>
    </form>
</body>
</html>

popup.aspx

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
        function setvalue() {
            opener.document.getElementById("TextBox1").value = document.getElementById("txtSample").value;
            this.window.close();
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:TextBox ID="txtSample" runat="server" Height="58px" TextMode="MultiLine"
            Width="170px"></asp:TextBox>
        <input type="button" runat="server" value="Set Value" onclick="setvalue()" />
    </div>
    </form>
</body>
</html>

The pages should be like this.



Thanks so much to view this tutorial.
Please add a comment if you like it.


No comments:

Post a Comment