Wednesday, December 3, 2008

JavaScript - How to send value to parent window from child window

When we open pop up windows in a web site, there might be situation where we need to send value from the pop up window to a component in the parent window, also to close the child window after passing the value.

Below lines of code help in such logical or business steps.

Example:-

I will open a pop up window on a button click in current window.
In the pop up window there will be a text box and a button beside it to submit.
When user enter some value in the pop up window text box and clicks on submit button, it should close the pop up window and assign the value from text box to a label in parent window.

Parent window content:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Parent</title>
</head>
<body>
<form id="prntfrm">
<input type="button" value="Open" onclick="window.open('child.htm');"/>
<br />
<label id="lblName" >My Name is :</label>
</form>
</body>
</html>


Child window content:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Child</title>
</head>
<body>
<input type="text" id="txtName" />
<br />
<input type="button" value="Submit" onclick="opener.document.getElementById('lblName').innerText+=document.getElementById('txtName').value;window.close();"/>
</body>
</html>






Output :








No comments: