SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2003
    Location
    l'Europe
    Posts
    94
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    pass values between popup and main window

    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:

    Code:
    <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:

    Code:
    ]<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
    Last edited by ann_dupont; May 31, 2003 at 05:47.

  2. #2
    SitePoint Addict
    Join Date
    May 2003
    Location
    The Netherlands
    Posts
    391
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I can follow it though not completely. Could you post a link to the url where this is happenning?

  3. #3
    SitePoint Enthusiast
    Join Date
    Feb 2003
    Location
    l'Europe
    Posts
    94
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    SitePoint Addict
    Join Date
    May 2003
    Location
    The Netherlands
    Posts
    391
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:

    Code:
    <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:

    Code:
    <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
    Last edited by nacho; May 31, 2003 at 12:43.

  5. #5
    SitePoint Enthusiast
    Join Date
    Feb 2003
    Location
    l'Europe
    Posts
    94
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 ... ... I made a mistake in formatting the code; I wrote
    Code:
    <input type="hidden" name="notid" value=<?=$notid?>">
    instead of
    Code:
    <input type="hidden" name="notid" value="<?=$notid?>">
    On passing and submitting this value, it made my main window gone wrong!

    Sorry, but I really appreciate your help.

    Thanks again,

    Ann

  6. #6
    SitePoint Addict
    Join Date
    May 2003
    Location
    The Netherlands
    Posts
    391
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I made a mistake in formatting the code
    No problem, it can happen to everyone. I'm happy it worked out well.

  7. #7
    SitePoint Member
    Join Date
    Jun 2004
    Location
    Florida
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Is this possible with input type radio?

    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. #8
    SitePoint Addict
    Join Date
    May 2003
    Location
    The Netherlands
    Posts
    391
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:

    Code:
    <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":

    Code:
    <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. #9
    SitePoint Member
    Join Date
    Jun 2004
    Location
    Florida
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello nacho,
    Great! that was exactly what I needed. I appreciate your help. Have a nice Sunday.
    thanks
    greg

  10. #10
    SitePoint Member
    Join Date
    Oct 2004
    Location
    lacombe
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #11
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Had this in the archives...

    Code:
    <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]
    Code:
    <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....
    ::: certified wild guess :::

  12. #12
    SitePoint Zealot ricklach's Avatar
    Join Date
    Nov 2004
    Location
    Victoria BC
    Posts
    116
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #13
    SitePoint Member honda_s2k's Avatar
    Join Date
    Aug 2006
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thanks!

    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!


    Quote Originally Posted by adios
    Had this in the archives...

    Code:
    <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]
    Code:
    <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....


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •