How to receive value from popup page to parent page

SheoNarayan
Posted by in ASP.NET category on for Beginner level | Points: 150 | Views : 27624 red flag
Rating: 4.5 out of 5  
 2 vote(s)

In this article, I am trying to answer the question asked about receiving textbox value from popup page to parent page asked in Forums at http://www.dotnetfunda.com/forums/thread2468-taking-values-from-pop-up-page.aspx.


 Download source code for How to receive value from popup page to parent page

Introduction

This is very frequently asked questons on many Forums that how to receive textbox or other form element value from Popup page to parent page. In this article, I have tried to answer this question.

Sample pages

In order to show the solution of this problem, I have taken two page. My focus in this article will be to solve the problem specified in this Forum post http://www.dotnetfunda.com/forums/thread2468-taking-values-from-pop-up-page.aspx

  1. Default.aspx - parent page
  2. PopupPage.aspx - popup page

In Default.aspx page, I have 5 textboxes, the first one is a normal textbox. On focus of second textbox (with id txtOpenPopup), I have to open a popup that will again contain 3 textboxes as displayed in the picture below.

My sample pages

What we need to do?

What we need to do is that as soon as user focus on 2nd textbox (labelled "Focus to open a popup"), we need to open a popup window as dispalyed above. In the popup window user will fill three textboxes and click on Submit button, the popup window should close and popup's three textboxes value should be set to parent's 3 textboxes.

Code for parent page - Default.aspx

My parent page code looks like below. You can see that I have 5 asp:TextBox controls. One important point to note that I have used ASP.NET 4.0 feature for the TextBox ie. ClientIDMode that will not manipulate the TextBox id at the time of rendering the html but it will maintain the same that I have specified in the aspx page. In earlier version of ASP.NET, you can use ClientID property of the control. For example, If I need to get the id of TextBox1 rendered on the page, I will need to use <%= TextBox1.ClientID %>.

<form id="form1" runat="server">

<div>

First textbox : <asp:TextBox ID="TextBox0" runat="server" /><br />

Focus to open a popup : <asp:TextBox ID="txtOpenPopup" runat="server" onkeydown="OpenPopup()" onmousedown="OpenPopup()" /> <br />

TextBox 1 : <asp:TextBox ID="TextBox1" runat="server" ClientIDMode="Static" /><br />

TextBox 2 : <asp:TextBox ID="TextBox2" runat="server" ClientIDMode="Static" /><br />

TextBox 3 : <asp:TextBox ID="TextBox3" runat="server" ClientIDMode="Static" /><br />

</div>

</form>

<script language="javascript">

function OpenPopup() {

popup("PopupPage.aspx");

}

// copied from http://www.dotnetfunda.com/codes/code419-code-to-open-popup-window-in-center-position-.aspx

function popup(url) {

var width = 300;

var height = 200;

var left = (screen.width - width) / 2;

var top = (screen.height - height) / 2;

var params = 'width=' + width + ', height=' + height;

params += ', top=' + top + ', left=' + left;

params += ', directories=no';

params += ', location=no';

params += ', menubar=no';

params += ', resizable=no';

params += ', scrollbars=no';

params += ', status=no';

params += ', toolbar=no';

newwin = window.open(url, 'windowname5', params);

if (window.focus) { newwin.focus() }

return false;

}

</script>

Get solutions of your .NET problems with video explanations, .pdf and source code in .NET How to's.

Then I have a JavaScript function called OpenPopup() that fires when user will either come to the 2nd texbox or click on the mouse (I have not used onfocus event as it was repetatively opening the popup windown even after closing and setting parent page value). In this case when user comes to the 2nd TextBox (Id = txtOpenPopup) using keyboard and try to navigate from here, the popup will open or when user focus this textbox using Mouse the popup will open.

I have used popup(url) that I have copied from http://www.dotnetfunda.com/codes/code419-code-to-open-popup-window-in-center-position-.aspx (Thanks to the Author of this post - Santosh4u) to open the popup at the center of the page.

Filling data in popup page

Code for Popup page - PopupPage.aspx

The popup page also has 3 textboxes with one Submit button that fires SubmitPage() javascript function. In that function I have used window.opener object to access the parent page and set three textboxes values by retrieving the value from popup textboxes.

<form id="form1" runat="server">

<div>

<h4>Popup page</h4>

TextBox 1 : <asp:TextBox ID="TextBox1" runat="server" ClientIDMode="Static" /><br />

TextBox 2 : <asp:TextBox ID="TextBox2" runat="server" ClientIDMode="Static" /><br />

TextBox 3 : <asp:TextBox ID="TextBox3" runat="server" ClientIDMode="Static" /><br />

<asp:Button runat="server" Text="Submit" OnClientClick="SubmitPage()" />

</div>

</form>

<script language="javascript">

function SubmitPage() {

window.opener.document.getElementById('TextBox1').value = document.getElementById('TextBox1').value;

window.opener.document.getElementById('TextBox2').value = document.getElementById('TextBox2').value;

window.opener.document.getElementById('TextBox3').value = document.getElementById('TextBox3').value;

window.opener.document.getElementById('TextBox1').focus();

this.close();

}

</script>

Data set from popup to parent page

As you can see that as soon as user clicks on Submit button, all textboxes values have been set to parent page textboxes and popup window is closed using this.Close() method. Please feel free to download the source code of this article from the top.

Conclusion

Hope this solution will be useful for others too apart from Klbaiju who had asked this question in Fourms. Keep reading and sharing your knowledge ! Thanks for reading.

Page copy protected against web site content infringement by Copyscape

About the Author

SheoNarayan
Full Name: Sheo Narayan
Member Level: HonoraryPlatinum
Member Status: Administrator
Member Since: 7/8/2008 6:32:14 PM
Country: India
Regards, Sheo Narayan http://www.dotnetfunda.com
http://www.snarayan.com
Ex-Microsoft MVP, Author, Writer, Mentor & architecting applications since year 2001. Connect me on http://www.facebook.com/sheo.narayan | https://twitter.com/sheonarayan | http://www.linkedin.com/in/sheonarayan

Login to vote for this post.

Comments or Responses

Posted by: Rajesh.Gour on: 9/2/2010 | Points: 10
Thank you Sheo
Good feature i don't know about this !!

Regards
Rajesh Gour
Posted by: Su_ma_2011 on: 8/1/2011 | Points: 25
Hi,

I want to pass/call this javascript function on checkbox checkchanged. How can i do it ?

Login to post response

Comment using Facebook(Author doesn't get notification)