|
|
entered value from child window to parent window From a child window or a small window once opened, we can transfer any user entered value to main or parent window by using JavaScript. You can see the demo of this here. Here the parent window is known as opener. So the value we enter in a child window we can pass to main by using opener.document object model. So if the name of the form in parent window is f1 and the text box where we want the value to be passed is p_name ( in parent window ) then from the child window we can access them by using the object.
opener.document.f1.p_name
The value for this object can be assigned like this
opener.document.f1.p_name.value="Any value";
We will try to make it interactive so we will assign this to a value entered by the user. Then we will use one input box in child window and name it as c_name. So we can pass the value of the input box of child window to the parent window input box by this line.
opener.document.f1.p_name.value = document.frm.c_name.value;
We will keep this line inside a function and call this function on click of a button. Inside the function after executing the above line we will add the code to close the child window. Like this ..
opener.document.f1.p_name.value = document.frm.c_name.value;
self.close();
demo on passing data from Child to Parent winwod
To open the child window this is the code used in parent window
<form method=post action='' name=f1>
<table border=0 cellpadding=0 cellspacing=0 width=550>
<tr>
<td ><font size=2 face='Verdana'>Your Name</font><input type=text name='p_name' size='8'>
<a href="javascript:void(0);" NAME="My Window Name" title=" My title here "
onClick=window.open("child3.html","Ratting",
"width=550,height=170,left=150,top=200,toolbar=1,status=1,");>Click here to open the child window</a>
</td></tr>
</table></form>
Inside the Child window code is here
<html>
<head>
<script langauge="javascript">
function post_value(){
opener.document.f1.p_name.value = document.frm.c_name.value;
self.close();
}
</script>
<title>(Type a title for your page here)</title>
</head>
<body >
<form name="frm" method=post action=''>
<table border=0 cellpadding=0 cellspacing=0 width=250>
<tr><td align="center"> Your name<input type="text" name="c_name" size=12 value=test> <input type=button value='Submit' onclick="post_value();">
</td></tr>
</table></form>
In the above code take care that there is no line break ( in parent file ) in line saying onClick=window.open(......
Passing multiple values
You can pass multiple values from child window to parent window. Now we will have two input boxes. Only changes to above code is shown here. In parent window.
<input type=text name='p_name' id=n1 size='8'>
<input type=text name='p_name2' id=n2 size='8'>
In child window
<html>
<head>
<script langauge="javascript">
function post_value(){
opener.document.f1.n1.value = document.frm.c_name.value;
opener.document.f1.n2.value = document.frm.c_name2.value;
self.close();
}
</script>
<title>(Type a title for your page here)</title>
</head>
<body >
<form name="frm" method=post action=''>
<table border=0 cellpadding=0 cellspacing=0 width=250>
<tr><td align="center">
Your name<input type="text" name="c_name" size=12 value=test>
<input type="text" name="c_name2" size=12 value=test2>
<input type=button value='Submit' onclick="post_value();">
</td></tr>
</table></form>
Found anything wrong or wants to improve the code by adding more features? Post your short comment here or use the Forum
| |
| | | razer | 21-09-2011 |
|---|
| hi... i want to ask something.. how to carry mutiplie value from child windows using mysql database into parent windows?.. | | Anuj Kumar | 17-02-2012 |
|---|
| this is very helping thankyou | | subbu | 09-08-2012 |
|---|
hi..A window has few links which are pointing to few other .html files. Write a program in javascript to track all the child windows, so that an alert message will be displayed for every 30secs from the clicked child window and sends a message to parent window.
| | Albert | 14-08-2012 |
|---|
| Can the the id ( | | smo | 16-08-2012 |
|---|
| Yes it is possible and it will work | | subhendu | 16-08-2012 |
|---|
| Now two input boxes added. From Mysql data base you can populate the input fields of child window |
|
|
|
|
|
|
