使用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?

Answer 1

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.