Creating an event when closing a window using Javascript

Question

I'm creating a popup that will allow me to select values from it, then after I've selected the values, I need to close the window, then pass it to my main form.

The code in my main form:

onClick="cust=window.open('popup.php?count=<?=$RowStart?>&name_id=' + document.form1.name_id<?=$RowStart?>.value'custWindow','top=50, left=50, height=150, width=375, scrollbars=yes, resizable=yes');cust.focus(););

And the code inside the popup:

<form name="form1" action="<?=$_SERVER['PHP_SELF']?>" method="post">
<table width="100%" border="0" cellpadding="0" cellspacing="0"> 
<tr>
<td>
<input id="name" name="name" type="text"/>
<input id="nameid" name="nameid" type="hidden" value ="<?=$name_id?>"/>
</td>
<td>
<input name="ellipse" type="button" value="..." onClick="ellipse=window.open('engine_item_list2.php?name='+document.form1.name.value,'ellipse','top=50,left=50,width=500,height=500, scrollbars=yes, resizable=yes'); ellipse.focus();"/> 
</td>
</tr>
</table>
</form>

What happens is when I click the button in the main form, it goes to open a new window where the popup has a form. Inside the form is an ellipse that gets the value for the name_id using the input from the name textfield.

I am able to get the values from the ellipse to the name_id, because the ellipse has a submit button inside it. But my popup window form1 should not have a save button involved, so I have to pass the values from the popup window back to the main form by either submitting it when I close the popup or using another way.

I think I should use a window.close() but I dont know how to pass the data back using it. Is there a way I can link the close button in the window such that when it gets clicked the values gets to be passed back to the main form?

You can pass data with javascript, by simply targeting the parent window, and the elements in that window, and insert a value or whatever from the opened window. The parent window would be window.opener — adeneo, Sep 27 '13 at 00:30
Have you checked the related questions? [**This one**](http://stackoverflow.com/questions/9276086/popup-window-to-return-data-to-parent-on-close) seems very similar. — jedwards, Sep 27 '13 at 00:30

jfriend00 · Accepted Answer · 2013-09-27T00:38:10.897

When a "done" button or something like that is clicked in your popup window, you should be able to use window.opener from the popup window to find the window that opened it and then put your data into the DOM or javascript variables of that window. After putting the data from the popup into the original window, you can then close the popup with window.close().

Note, it is more common these days to use a temporary overlay in the same window for your form rather than popping up a new window and it also avoids any conflicts with popup blockers that might get in the way of popping up your new window.

This will not handle the close corner in the window. That would generally just be equivalent to the "Cancel" operation so nothing needs to be done when it is clicked (per normal UI convention). The typical UI would involve a "Done", "Finished" or "OK" button that would be clicked when the user wants the data entered to be accepted. It would be in the click handler for this button that you would use window.opener to find the parent/main window, put the data from the popup form into that window and then call window.close() to close the popup.

I'm a little bit confused. I'm thinking of submitting the data back to the parent window using ajax, but can I do it when I unload the popup window, or do I have to call window.close()? — marchemike, Sep 27 '13 at 00:48
@marchemike - Ajax is for communicating with servers, not for communicating with other browser windows. If you just want to put the data in the other window, then use window.opener to get the other window and then access either global variables or the DOM of that other window and put the data into the other window. — jfriend00, Sep 27 '13 at 01:39

score 0 · Answer 2 · answered Sep 27 '13 at 00:30

0

Javascript

window.onbeforeunload=function(){
   alert('This is the popup!');
}

OR

function window.onbeforeunload(){
   alert('This is the popup!');
}

answered Sep 27 '13 at 00:30

Jack

1,901
1
19
32

Does it mean that when I click the close button on the window, before the process gets killed, it can send data back to the main form using this function? Do I just have to place the variables there or do I have to make a connection with the fields from my parent window? – marchemike Sep 27 '13 at 00:33
The following i believe - "When I click the close button on the window, before the process gets killed, it can send data back to the main form using this function." Although i'm not too sure! – Jack Sep 27 '13 at 00:35
The HTML5 specification says that function calls like `alert()` may be ignored from onbeforeunload. – jfriend00 Sep 27 '13 at 00:36
@JackWilliams - yeah, so I'd suggest you change your example to something that might actually work. If the OP tries your suggested code just to see if it works, they will probably find it doesn't work. Might I suggest a `console.log()`? – jfriend00 Sep 27 '13 at 00:39

Creating an event when closing a window using Javascript

2 Answers2