returning value(s) from a popup window

[Haybails]

Hey there JavaScript Gurus~

 The old "Haybails" is back to rack your brain for a quick answer to what is probably an elementary question.

  Here's the deal. I'm trying to create a popup clock time selector. I have a page with a link. This link will lead the user (via a javascript function using the window.open call) to a second page. On this second page, I have a mapped image of a clock face. When the user clicks on any of the mapped sections of this image (say like, 1 oclock or 2 Oclock or 3 Oclock and so on) on the second page, I want the second page to close and an input box on the first page to be populated with a value associated with the portion of the clock image clicked on the second page.

 I've got the everything working exept populating the input box on the first page with the associated value from the mapped clock image on the second page, and then closing the second browser. LOL ... but, of course, these two pieces are the main pieces of my Pie! LOL

 Any of you Wunderkinds mind teaching me how to do this?

 Thanx much in advance,


 

[Jon Hanlon]

In the popup window, there's an .opener property which is a reference to the window that opened it.
So if your form on the main document is called myForm, and your input field myField, you would say (in the popup) :
self.opener.forms.myForm.myField.value = whatever;

[Haybails]

"jonhanlon"~

 Thanx much for response ... however, I'm going to need a wee bit more hand holding than that! LOL. How 'bout I post some snippets of my code? Then you can say, "On this line, change it to this" and so on.

 The frame setting of the FIRST page is as follows:

&nbsp;<frameset Rows=28,*,135 frameborder="0" framespacing="0" bordercolor="#cccc99" name="innerframe" id="innerframe">
&nbsp;&nbsp;<frame name="Links" src="Links.asp" frameborder="0" framespacing="0" border="0" bordercolor="#cccc99" scrolling="NO" marginwidth="0" marginheight="0">
&nbsp;&nbsp;<frame name="Report" src="ImagePane.asp" frameborder="0" framespacing="0" border="0" bordercolor="#cccc99" scrolling="auto" marginwidth="0" marginheight="0">
&nbsp;&nbsp;<frame name="Settings" src="UserSettings.asp" frameborder="0" framespacing="0" border="0" bordercolor="#cccc99" scrolling="NO" marginwidth="0" marginheight="0">
&nbsp;</frameset>

&nbsp;OK, FIRST page (which is "UserSettings.asp") -

&nbsp;Form tag is as follows:

&nbsp;<form method="post" action="BuildGraph.asp" name="ContentForm" id="form1" target="Report">

&nbsp;Link TO the popup window is as follows:

&nbsp;<a href="javascript: popupclock()" onmouseover="window.status='Select a start time.';return true;" onmouseout="window.status='';return true;"><img src="../images/show-clock.gif" border=0 ALIGN="ABSMIDDLE" alt="Select a start time."></a>

&nbsp;The "popupclock" function is as follows:

&nbsp;function popupclock(){
&nbsp;&nbsp;if (document.all||document.layers)
&nbsp;&nbsp;window.open("theClock.htm","theClock","width=150,height=185,resizable=yes")
&nbsp;}

&nbsp;OK, SECOND page (the "popup" clock) -

&nbsp;<img src="../images/smallClockFace.gif" border="0" usemap="#clockFace">
&nbsp;&nbsp;<map name="clockFace">
&nbsp;&nbsp;&nbsp;<area href="HREF='javascript: onClick="self.opener.forms.ContentForm.startHour.value="12";return true;window.close();' ALT="Twelve O'Clock" shape="poly" coords="55,0, 65,0, 84,6, 84,16, 59,55, 59,9, 55,9">


&nbsp;What do I need to change? Again, I want to get the "TIME" value back to the first page and close the popup browser page when the user clicks in the image. Thanx, again, in advance,


&nbsp;

[Jon Hanlon]

You're pretty much there, but where is the form element called startHour?
You need
<form method="post" action="BuildGraph.asp" name="ContentForm" id="ContentForm" target="Report">
Start Hour :<input type=text id=startHour name=startHour></input>
</form>

It's a good idea to set the name and id of form elements to the same thing. id is the new standard for HTML 4.0 & XHTML, whereas name was the old HTML 3.2 standard.

There's also a bit of confusion with your <area> tags, this:
<area href="HREF='java script: onClick="self.opener.forms.ContentForm.startHour.value="12";return true;window.close();' ALT="Twelve O'Clock" shape="poly" coords="55,0, 65,0, 84,6, 84,16, 59,55, 59,9, 55,9">
Should be:

<area href="#" onClick="self.opener.forms.ContentForm.startHour.value='12';self.close();"
ALT="Twelve O'Clock" shape="poly" coords="55,0, 65,0, 84,6, 84,16, 59,55, 59,9, 55,9">
I also presume you have other <area> elements as this one only defines 12 O'Clock.

What I'd probably do is create a function:

<script language="Javascript">
function setAndClose(hour) {
self.opener.forms.ContentForm.startHour.value = hour;
setTimeout("self.close()",200); // close in 200 millisecs
return false;
}
</script>

<area href="#"
onclick="return setAndClose('12')"
alt="Twelve O'Clock"
....


We set a timeout to close the popup in 200 milliseconds which'll give it enough time to update the opener. I'd also keep the hour as a string because a) it's going to a string (startHour.value) anyway, and b) it avoids all the octal rubbish Javascript goes through when it sees a leading zero.

[Haybails]

"jonhanlon"~

&nbsp;Thanx much for your help; it's working splendidly! Here's a follow-up question, if you don't mind:

&nbsp;Now, I also want to add two "radio" buttons to my pop-up clock page (one for "AM" and one for "PM") like so:

&nbsp;&nbsp;<b>AM</b>&nbsp;<input type="Radio" name="DayPart" value="AM" checked="Yes">&nbsp;&nbsp;<B>PM</b>&nbsp;<input type="Radio" name="DayPart" value="PM">

&nbsp;I also have a corresponding input field ("startDayPart") on my "UserSettings.asp" page (which contains the "ContentForm" form). Now what do I need to do, with the function which you suggested in your previous post, to also send the value of the selected radio button back? I tried the following on my pop-up clock page:

&nbsp;&nbsp;FIRST, I changed your suggested function to:

&nbsp;&nbsp;&nbsp;function setAndClose(hour) {
&nbsp;&nbsp;&nbsp;&nbsp;self.opener.document.forms.ContentForm.startHour.value = hour;
&nbsp;&nbsp;&nbsp;&nbsp;self.opener.document.forms.ContentForm.startDayPart.value = document.myform.DayPart.value;
&nbsp;&nbsp;&nbsp;&nbsp;setTimeout("self.close()",200); // close in 200 millisecs
&nbsp;&nbsp;&nbsp;&nbsp;return false;
&nbsp;&nbsp;&nbsp;}

&nbsp;&nbsp;SECOND, I wrapped the radio buttons and the mapped clock image in a form like so:

&nbsp;&nbsp;&nbsp;<form action="theClock.htm" method="post" name="myform">

&nbsp;While this doesn't produce any errors, the "startDayPart" input on my "UserSettings.asp" page is getting populated with a value of "undefined". What am I missing? As usual, I'm sure that there is an elementary flaw in both my understanding and usage of Javascript. For that I apologize ... but, I am learning with each problem all of you folks help me solve. Thanx, again, in advance.


&nbsp;

[Jon Hanlon]

Radio Buttons 101.

Have a look at your HTML:
<b>AM</b><input type="Radio" name="DayPart" value="AM" checked="Yes">
<b>PM</b><input type="Radio" name="DayPart" value="PM">

There are TWO values here! Which one should the script return?! Obviously the one that's checked.

When a form is submitted, the browser inspects the radio object and generates a name/value pair for the one that's checked (if any). Radio buttons present themselves as collections (like arrays), so you need a function to loop through the collection looking for the set one:

function getRadio(obj) {
for (var i=0; i < obj.length; i++) {
if (obj[i].checked) return obj[i].value;
}
return false;
}

// So your line becomes: self.opener.document.forms.ContentForm.startDayPart.value = getRadio(document.myform.DayPart);





For more information on Radio Buttons, see http://msdn.microsoft.com/workshop/author/dhtml/reference/objects/input_radio.asp

[Haybails]

"jonhanlon"~

&nbsp;Well, what can I say? What should I say ... aside from "I'm embarrassed"? Sorry for wasting your time with such an elementary question. Guess I should go back and spend some time re-learning the basics.

&nbsp;But, as always, thank you for your time, your expertise and your assistance.


&nbsp;

[Jon Hanlon]

No problem.
I've gone back and re-read my post and I didn't mean to come across as so patronising - sorry about that. My posting was actually my second attempt; my first attempt was supposed to be a detailed explanation but turned into waffle, so I deleted it and tried to be more-to-the-point the second time. Seems I tried a bit too hard.

Anyway, wish I had a dime for every time I've seen this problem regarding radio buttons, there should be an easier way of determining which one's been selected.