Pass values between popup and main window

JavaScript
1

Hi,

I’m making a php application where details on some data can being “choosed” from a popup window.
On clicking a link, the popup opens with a result set. The user can click on the needed row and a variable is being passed on to the main window. The form in the main window is being submitted so details are being filled in with help of the passed variable.

[Main window]
this opens my popup:

<script type="text/javascript">
var OpenSubX = (screen.width/2)-275;
var OpenSubY = (screen.height/2)-150;
var pos = "left="+OpenSubX+",top="+OpenSubY;

function OpenSub(){
OpenSub1Window = window.open("not.php?notid=<?=$notid?>","not","width=550,height=300,"+pos);
}
</script>

… opened with <a href=“javascript:OpenSub()”>this</a>

[Popup window (not.php)]
this transfers the value:

]<script type="text/javascript">
function SubForm(i)
{
window.opener.document.forms[0].notid.value=document.forms[i].notid.value;
window.opener.document.forms[0].submit();
window.close();
}
</script>

… being transfered with <input type=“button” … onClick=“javascript:SubForm(<?=$i?>)” …>

It works perfect without the "i"s in the last function (as with just one row in the result set on the popup window).
I added the “i” because a result list has more rows than one. So every row has its own mini-form with a button, a hidden notid-value and name “i”…

On clicking a button in the result list, the value is being transfered correctly to the main window, it is being refreshed with the submit and the popup is being closed.

But when I click on any link or button in the main window, nothing happens anymore.
I’ve deleted the window.close-line of the function, but still no links/buttons are working after submitting the main form by the function…

Can anyone helps me with what’s happening here?
Is there a better way in doing these things?

Thank you very much for any suggestions!

Ann

2

I can follow it though not completely. Could you post a link to the url where this is happenning?

3

Thank you for your reply, nacho.

I’m sorry but it is all happening on intranet. I’m more than happy to elaborate on things that aren’t clear.
Maybe I can summarize in a whole again without the code:

1/ in the main window one has to fill out the data.
2/ because some data is already stored in the database (eg. details of a mail address (name contact, address, zip, city)) I came up with the idea to place a button on the main form for entering those details quickly.
3/ clicking upon it pops up a small window where one can enter a zip code - after leaving the field, the popup refreshes with a result list of details of all known mail addresses, based on the given zip. In this result set every row starts with a button -> when clicking on this button, the variable notid of that row (hidden) is being transfered back to the main form
4/ the code from the popup finaly refreshes the main form so the details of the mailaddress are being filled out (thanks to the passed variable notid)

If you need more information about something else, please post back…

Thank you,

Ann.

4

The following example works for me but as you may have to deal with a different browser/platform it may not be valid for you.

The main file would look like this:

<html>
<head>
<title>Main</title>
</head>
<body>
<form name="myForm">
<input type="button" name="opener" value="Click to pop up" onClick="popUp();">
<input type="text" name="holder" value="" size="25">
<br>
 <select name="myselect" onChange="selectItem();">
 <option></option>
 <option value="value1">option 1</option>
 <option value="value2">option 2</option>
 <option value="value3">option 3</option>
 <option value="value4">option 4</option>
 <option value="value5">option 5</option>
 <option value="value6">option 6</option>
 <option value="value7">option 7</option>
 </select>
</form>
<script language="JavaScript">
<!--
function selectItem(){
	var selindex=document.myForm.myselect.selectedIndex;
	if (selindex!=0) {document.myForm.holder.value=document.myForm.myselect[selindex].value;}
}

var wi=null;
function popUp(){
   if (wi) wi.close();
   wi=window.open("popup.htm","","width=600,height=300,location=no,scrollbars=no,status=no");
}
//-->
</script>
</body>
</html>

The pop up (the main calls popup.htm to open) file would look like this:

<html>

 <head>
  <title>pop up</title>
  <script language="JavaScript">
<!--
function selectItem(){
	var selindex=document.popUpForm.myselect.selectedIndex;
	if (selindex!=0) {
	   window.close();
	   window.opener.document.myForm.holder.value=document.popUpForm.myselect[selindex].value;
	}
}
//-->
  </script>
 </head>

 <body topmargin="0" leftmargin="0" marginheight="0" marginwidth="0">
 <br>
 <form name="popUpForm">
 <select name="myselect" onChange="selectItem();">
 <option></option>
 <option value="value1">option 1</option>
 <option value="value2">option 2</option>
 <option value="value3">option 3</option>
 <option value="value4">option 4</option>
 <option value="value5">option 5</option>
 <option value="value6">option 6</option>
 <option value="value7">option 7</option>
 </select>
 </form>
 </body>

</html>

Try it and let me know …

Note.- I’ve added also a select element to the main file so you can see it still works after submitting form the pop up

5

thank you for your reply, nacho !

I tried your code and indeed, it works perfectly (PHP).
Since somewhat the same mechanism was used, I focused on it in my scripts by making the form in the main window a GET form so I could see what was happing on transfering the var with javascript and … :o … I made a mistake in formatting the code; I wrote

<input type="hidden" name="notid" value=<?=$notid?>">

instead of

<input type="hidden" name="notid" value=[COLOR=red]"[/COLOR]<?=$notid?>">

On passing and submitting this value, it made my main window gone wrong!

Sorry, but I really appreciate your help. :angel:

Thanks again,

Ann

6

I made a mistake in formatting the code

:stuck_out_tongue: No problem, it can happen to everyone. I’m happy it worked out well.

7

Hi nacho,
wonderful your script. It works perfectly. I was trying to get this with input type radio, but does not have idea how to do that. Could you please give an idea of how.
thanks
greg

8

Hi Greg,

I do not normally write code “on demand”. Besides, changing the script to make it work with radio fields is not that hard, requiring little knowledge of JavaScript and HTML. Nevertheless, I guess I get “soft” on Sunday morning so here you have:

The main file:


<html>
<head>
<title>Main</title>
</head>
<body>
<form name="myForm">
<input type="button" name="opener" value="Click to pop up" onClick="popUp();">
<input type="text" name="holder" value="" size="25">
<br>
 <input type="radio" value="value1" name="myselect" onChange="selectItem();" id="id1"><label for="id1">option 1</label>
<br>
 <input type="radio" value="value2" name="myselect" onChange="selectItem();" id="id2"><label for="id2">option 2</label>
<br>
 <input type="radio" value="value3" name="myselect" onChange="selectItem();" id="id3"><label for="id3">option 3</label>
<br>
 <input type="radio" value="value4" name="myselect" onChange="selectItem();" id="id4"><label for="id4">option 4</label>
<br>
 <input type="radio" value="value5" name="myselect" onChange="selectItem();" id="id5"><label for="id5">option 5</label>
<br>
 <input type="radio" value="value6" name="myselect" onChange="selectItem();" id="id6"><label for="id6">option 6</label>
<br>
 <input type="radio" value="value7" name="myselect" onChange="selectItem();" id="id7"><label for="id7">option 7</label>
</form>
<script language="JavaScript">
<!--
function selectItem(){
	var select_options=document.myForm.myselect;
	var len=select_options.length;
	var selindex=0;
	for (var i=0;i<len;i++){
		if (select_options[i].checked) {selindex=select_options[i].value;}
	}
	if (selindex!=0) {document.myForm.holder.value=selindex;}
}

var wi=null;
function popUp(){
   if (wi) wi.close();
   wi=window.open("radio_popup.htm","","width=600,height=300,location=no,scrollbars=no,status=no");
}
//-->
</script>
</body>
</html>

And the popup, which in this case I called “radio_popup”:


<html>

 <head>
  <title>pop up</title>
  <script language="JavaScript">
<!--
function selectItem(){
	var select_options=document.popUpForm.myselect;
	var len=select_options.length;
	var selindex=0;
	for (var i=0;i<len;i++){
		if (select_options[i].checked) {selindex=select_options[i].value;}
	}
	if (selindex!=0) {
		window.close();
		var opener_form=window.opener.document.myForm;
		var opener_options=opener_form.myselect;
		var len=opener_options.length;
		for (var i=0;i<len;i++){
			if (opener_options[i].checked) {opener_options[i].checked=false;}
		}
		window.opener.document.myForm.holder.value=selindex;
	}
}
//-->
  </script>
 </head>

 <body topmargin="0" leftmargin="0" marginheight="0" marginwidth="0">
 <br>
 <form name="popUpForm">
 <input type="radio" value="value1" name="myselect" onChange="selectItem();" id="id1"><label for="id1">option 1</label>
<br>
 <input type="radio" value="value2" name="myselect" onChange="selectItem();" id="id2"><label for="id2">option 2</label>
<br>
 <input type="radio" value="value3" name="myselect" onChange="selectItem();" id="id3"><label for="id3">option 3</label>
<br>
 <input type="radio" value="value4" name="myselect" onChange="selectItem();" id="id4"><label for="id4">option 4</label>
<br>
 <input type="radio" value="value5" name="myselect" onChange="selectItem();" id="id5"><label for="id5">option 5</label>
<br>
 <input type="radio" value="value6" name="myselect" onChange="selectItem();" id="id6"><label for="id6">option 6</label>
<br>
 <input type="radio" value="value7" name="myselect" onChange="selectItem();" id="id7"><label for="id7">option 7</label>
 </form>
 </body>

</html>

I hope this is what you were looking for.

9

Hello nacho,
Great! that was exactly what I needed. I appreciate your help. Have a nice Sunday.
thanks
greg

10

How would one go about passing multiple variables (or better yet, an array) back to the parent? In other words, how does this work with multiple selects or checkboxes?

11

Had this in the archives…


<html>
<head>
<title>Master Form Page</title>
<script type="text/javascript">

var Fwin = null;
var w = 300;
var h = 360;
var l = (screen.availWidth - w) / 2;
var t =  (screen.availHeight - h) / 2;

function openFormWin(url)
{
	Fwin = open(url,'Fwin','width='+w+',height='+h+',left='+l+',top='+t+',status=0');
	if (Fwin && !Fwin.closed)
		Fwin.focus();
	return false;
}

</script>
</head>
<body onload="document.mainform.reset()">
<br>
<a href="#" onclick="return openFormWin('formpop.html')">Show Form</a>
<br><br><br>
<form name="mainform">
<input name="user_name" type="text">___name<br>
<input name="user_address" type="text">___address<br>
<input name="user_city" type="text">___city<br><br>
<select name="country">
<option value="France">France</option>
<option value="Scotland">Scotland</option>
<option value="Romania">Romania</option>
</select>___country<br><br>
___temperature<br><input name="temp" type="radio" value="hot"> hot<br>
<input name="temp" type="radio" value="cold"> cold<br><br>
___yes? <input name="yes" type="checkbox" value="yes"><br>
___no? <input name="no" type="checkbox" value="yes">
</form>
</body>
</html>

[formpop.html]


<html>
<head>
<title>Pop Up Form</title>
<script type="text/javascript">

function transfer_to_opener(oSrcForm, sDestFormName)
{
	if (!opener || opener.closed)
		return false;
	var el, grp, opt, i = 0, j;
	var opener_els = opener.document.forms[sDestFormName].elements;
	while (el = oSrcForm.elements[i++])
	{
	if (opener_els[el.name])
		switch (el.type)
		{
			case 'text' :
			case 'textarea' :
			case 'hidden' :
				opener_els[el.name].value = el.value;
				break;
			case 'checkbox' :
			case 'radio' :
				grp = oSrcForm.elements[el.name]; j = 0;
				if (typeof grp.length == 'undefined')
					opener_els[el.name].checked = el.checked;
				else while (el = grp[j])
					opener_els[el.name][j++].checked = el.checked;
				break;
			case 'select-one' :
			case 'select-multiple' :
				j = 0;
				while (opt = el.options[j])
					opener_els[el.name].options[j++].selected = opt.selected;
				break;
		}
	}
	return false;
}

</script>
</head>
<body bgcolor="#82a4c8">
<div style="padding-top:10px;padding-left:50px;">
<form name="popForm" onsubmit="transfer_to_opener(this, 'mainform');/****self.close();*****/return false;">
<!-- remove /**** and *****/ (above line) to close pop-up automatically -->
<input name="user_name" type="text">___name<br>
<input name="user_address" type="text">___address<br>
<input name="user_city" type="text">___city<br><br>
<select name="country">
<option value="France">France</option>
<option value="Scotland">Scotland</option>
<option value="Romania">Romania</option>
</select>___country<br><br>
___temperature<br><input name="temp" type="radio" value="hot"> hot<br>
<input name="temp" type="radio" value="cold"> cold<br><br>
___yes? <input name="yes" type="checkbox" value="yes"><br>
___no? <input name="no" type="checkbox" value="yes">
<br><br>
<input type="submit" value="DONE">
</form>
</div>
</body>
</html>

No idea if it works…:smiley:

12

I tried your radio button example above and I will confess to being less than proficient in javascript. Can you tell me - does the parent window pass a value to the popup window (that is the value of the selected button) and if it does how do you get at it in php.

Rick

13

I realize this is an old thread (38 months) but it was EXACTLY what I needed. I made one modification to the submit button though:
<input type=“submit” value=“Save Selections” onMouseUp=“window.close()”> which closes the pop up window. Otherwise, I only changed the forms fields. Thank you!