entered value from child window to parent window

Child to Parent window data transfer 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.

Opening closing & Passing data from Child window to parent window in JavaScript & refreshing main

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 window

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>
Passing data from Parent to Child Window
Window object Reference Window refreshing Parent window from Child
Subscribe to our YouTube Channel here


Subscribe

* indicates required
Subscribe to plus2net

    plus2net.com







    Puneet

    29-03-2014

    very nice example! Thanks.
    Oscar

    17-09-2014

    Excellent!!! It works!!!
    Anil

    02-04-2015

    how can i pass the value from child window if the parent window has the table instead of text box ....
    smo

    02-04-2015

    I think you are saying passing value to a database table. Here after getting the data in the text box you have to submit the form with new data to store in a database table. You can even directly store then in a table by using JQuery or Ajax. Some more tutorials on this line is going to be added.
    saeid

    30-07-2015

    thanx man ... you made my day ;)
    that`s a brilliant example ....
    Priank

    06-10-2015

    Good Ex. I have situation where in Parent Opens a chil window for Gmail Login. I get email id and then submit it to my application and redirect the parent to the new URL.
    I am using window.opener.document.location.href for redirection, however limitaion is it supports GET and I want data in POST.
    Is their a solution/suggestion for me to get around this issue.
    Thanks beforehand.
    smo1234

    06-10-2015

    You can <a href=../html_tutorial/submit-new.php>submit form to a new window</a>.
    nidhi singh

    25-07-2016

    Parent File name is index.html and child file name is child3.html . i paste the same code but open the pop up window . after submit .nothing happen.what will do?
    smo1234

    26-02-2017

    What is the error message you are getting ? Press Ctrl + Shift + J keys ( same time ) to get the JavaScript error window.

    13-11-2022

    Excellent!!! It works!!!

    Post your comments , suggestion , error , requirements etc here




    We use cookies to improve your browsing experience. . Learn more
    HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
    ©2000-2024 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer