How to receive value from popup page to parent page

Download

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.

If you like this article, subscribe to our RSS Feed. You can also subscribe via email to our Interview Questions, Codes and Forums section.