Share this page 

Update a parent window from a childTag(s): Language


In this example we open a child window, type a value in the field and transfer the content to parent field.

[examplejs1.html] 

<HTML><HEAD></HEAD>
<SCRIPT LANGUAGE="JavaScript">
function openChild(file,window) {
    childWindow=open(file,window,'resizable=no,width=200,height=400');
    if (childWindow.opener == null) childWindow.opener = self;
    }
</SCRIPT>

<BODY>
<FORM NAME="parentForm">
<INPUT TYPE="button" VALUE="Open child" 
  onClick="openChild('examplejs2.html','win2')">
<BR><INPUT NAME="pf1" TYPE="TEXT" VALUE="">
<BR><INPUT NAME="pf2" TYPE="TEXT" VALUE="">
</FORM>
</BODY></HTML>
[examplejs2.html] 
<HTML><HEAD>
<SCRIPT LANGUAGE="JavaScript">
function updateParent() {
    opener.document.parentForm.pf1.value = document.childForm.cf1.value;
    opener.document.parentForm.pf2.value = document.childForm.cf2.value;
    self.close();
    return false;
}
</SCRIPT>
</HEAD><BODY>
<FORM NAME="childForm" onSubmit="return updateParent();">
<BR><INPUT NAME="cf1" TYPE="TEXT" VALUE="">
<BR><INPUT NAME="cf2" TYPE="TEXT" VALUE="">
<BR><INPUT TYPE="SUBMIT" VALUE="Update parent">
</FORM>
</BODY></HTML>
You can try it here.

The next example updates an array with the values from a child window.

[examplejs3.html] 

<HTML><HEAD></HEAD>
<SCRIPT LANGUAGE="JavaScript">

var myarray = new  Array ( "foo", "bar" );

function openChild(file,window) {
    childWindow=open(file,window,'resizable=no,width=200,height=400');
    if (childWindow.opener == null) childWindow.opener = self;
 }

function showarray() {
    alert(myarray.join(" | "));
 }

function updatemyarray(array) {
  // convert both arrays as string with a know delimiter
  newarray_temp = myarray.join("|") + "|" + array.join("|")
  // get a resulting array
  myarray = newarray_temp.split("|");
}

</SCRIPT>

<BODY>

<INPUT TYPE="button" VALUE="Open child" onClick="openChild  ('examplejs4.html','win2')">

<INPUT TYPE="button" VALUE="Show myarray content" onClick="showarray()">
</BODY></HTML>
[examplejs4.html] 
<HTML><HEAD>
<SCRIPT LANGUAGE="JavaScript">
var myarray_child = new Array ( "hello" , "world" );

function showarray() {
    alert(myarray_child.join(" | "));
 }



function updateParentArray() {
    opener.updatemyarray(myarray_child);
    self.close();
}

</SCRIPT>
</HEAD>
<BODY>

<INPUT TYPE="SUBMIT" VALUE="Update parent array" onClick="updateParentArray()">
<INPUT TYPE="button" VALUE="Show myarray_child content" onClick="showarray()">

</BODY>
</HTML>
You can try it here.
mail_outline
Send comment, question or suggestion to howto@rgagnon.com