How do I transfer radio button values to another page? [Archive]

View Full Version : How do I transfer radio button values to another page?

Gary Williams

10-02-2002, 11:20 PM

Transfering data from Popup Form to Original Form

Using the following two forms, I can transfer text and dropdown list data back and forth OK but I can't manage to write the radio buttons or checkboxes values set in the popup form, back into the main form.

-----------------------
THE SCRIPTS

Here is how to call up a Second Enquiry Form (in a pop up window) so you can ask additional questions when necessary, the answers entered on the Popup Enquiry Form being automatically transfered back to the Main Enquiry Form for submission, when the popup is closed.

Although I have left the text fields on the main form visible (for testing purposes), you would usually have these as hidden fields to store the popup forms' data values after the popup window has been closed.

This system keeps your Main Enquiry Form as short as possible but allows additional questions to be asked only when necessary. If you have a question like "Are you the only person travelling, or are there any others?" and you have a pair of radio buttons for the answers - First one "No - only me" and the Second one "Yes - others are travelling with me", then use the second radio button (when clicked) to call the popup form using:

onclick="window.open('popup. htm','popup','width=400,height=250,left=350,top=20
0')">

to ask the additional questions about the other travellers.

----------------------------------

Create two files, 'popup.htm' and 'form.htm', from the code below:

----------------------------------



<HTML>
<HEAD>

<TITLE>Form and additional Popup Form</TITLE>

</HEAD>
<BODY>

<FORM NAME="form" ACTION="" METHOD=POST>

<P><INPUT TYPE=BUTTON NAME="Pop Up Button" VALUE="Pop Up Window" onclick="window.open('popup. htm','popup','width=400,height=450,left=350,top=20
0')"></P>

<P><INPUT TYPE=TEXT NAME="firstname2" VALUE="" SIZE=23 MAXLENGTH=23>firstname2</P>

<P><INPUT TYPE=TEXT NAME="secondname2" VALUE="" SIZE=23 MAXLENGTH=23>secondname2</P>

<P><INPUT TYPE=TEXT NAME="lastname2" VALUE="" SIZE=23 MAXLENGTH=23>lastname2</P>

<P><SELECT NAME="title2">

<OPTION VALUE="" SELECTED>Please Select</OPTION>
<OPTION VALUE="">----------------------------------</OPTION>
<OPTION VALUE="Executors">Executors</OPTION>
<OPTION VALUE="Dr">Doctor</OPTION>
<OPTION VALUE="Mr">Mr</OPTION>
<OPTION VALUE="Mrs">Mrs</OPTION>
<OPTION VALUE="Miss">Miss</OPTION>
<OPTION VALUE="Ms">Ms</OPTION>
</SELECT>

</P>

<INPUT TYPE=RADIO NAME="radiobutton" VALUE="No">No
<INPUT TYPE=RADIO NAME="radiobutton" VALUE="Yes">Yes

<P><INPUT TYPE=TEXT NAME="radiobuttonvalue" VALUE="" SIZE=23 MAXLENGTH=23>radiobutton value</P>

<P>

<INPUT TYPE=CHECKBOX NAME="checkbox" VALUE="1">

<P><INPUT TYPE=TEXT NAME="checkboxvalue" VALUE="" SIZE=23 MAXLENGTH=23>checkbox value</P>

</P>

</FORM>
</BODY>
</HTML>

-----------------------------------------------------
-----------------------------------------------------



<HTML>
<HEAD>

<TITLE>Popup Form - for additional questions</TITLE>

<SCRIPT LANGUAGE=JAVASCRIPT>

function validbutton() {

// make sure they select a radio button

button = -1
for (i=0; i<popup.radiobutton.length; i++) {
if (popup.radiobutton[i].checked)
button = i
}
if (button == -1) {
alert("You didn't choose a radio button")
return false
}
else if (button == 0) {
opener.document.form.radiobuttonvalue.value="No";
return false
}
else if (button == 1) {
opener.document.form.radiobuttonvalue.value="Yes";
return false
}

}

function validbox() {

// make sure they select the checkbox

if (popup.checkbox.checked) {
opener.document.form.checkboxvalue.value="Checked";
return false
}
else {
alert("You didn't select the checkbox")
return false
}
}

function transferdataout() {

opener.document.form.title2.value=document.popup.title2.value;
opener.document.form.firstname2.value=document.popup.firstname2.value; opener.document.form.secondname2.value=document.popup.secondname2.value;
opener.document.form.lastname2.value=document.popup.lastname2.value;
return validbutton(this);
return validbox(this);
self.close();
return false

}

function loaddatain() {

document.popup.title2.value=opener.document.form.title2.value;
document.popup.firstname2.value=opener.document.form.firstname2.value;
document.popup.secondname2.value=opener.document.form.secondname2.value;
document.popup.lastname2.value=opener.document.form.lastname2.value;
return false

}
</SCRIPT>

</HEAD>

<BODY onload="loaddatain(this);">

<FORM NAME="popup" ACTION="" METHOD=POST>

<P><INPUT TYPE=TEXT NAME="firstname2" VALUE="" SIZE=20 MAXLENGTH=50>First Name/Initial</P>

<P><INPUT TYPE=TEXT NAME="secondname2" VALUE="" SIZE=20 MAXLENGTH=50>Second Name/Initial</P>

<P><INPUT TYPE=TEXT NAME="lastname2" VALUE="" SIZE=20 MAXLENGTH=50>Last Name</P>

<P><SELECT NAME="title2">

<OPTION VALUE="" SELECTED>Please Select</OPTION>
<OPTION VALUE="">----------------------------------</OPTION>
<OPTION VALUE="Executors">Executors</OPTION>
<OPTION VALUE="Dr">Doctor</OPTION>
<OPTION VALUE="Mr">Mr</OPTION>
<OPTION VALUE="Mrs">Mrs</OPTION>
<OPTION VALUE="Miss">Miss</OPTION>
</SELECT>

</P>

<P>

<INPUT TYPE=RADIO NAME="radiobutton" VALUE="No">No
<INPUT TYPE=RADIO NAME="radiobutton" VALUE="Yes">Yes
</P>
<P>

<INPUT TYPE=BUTTON NAME="testradiobutton" VALUE="Test Radio Button" onClick="return validbutton(this);">

</P>

<P>

<INPUT TYPE=CHECKBOX NAME="checkbox" VALUE="1">

</P>

<P>

<INPUT TYPE=BUTTON NAME="testcheckbox" VALUE="Test Checkbox" onClick="return validbox(this);">

</P>

<INPUT TYPE=BUTTON NAME="Transfer Data" VALUE="Transfer Data and Close Window"
onclick="return transferdataout(this);">

<P>
<INPUT TYPE=BUTTON NAME="Close Window" VALUE="Close Window" onclick="self.close();">
</P>

</FORM>
</BODY>
</HTML>

whammy

10-03-2002, 02:13 AM

You can't get radio button values using javascript... you need to loop through them and see which ones are checked. :D

adios

10-03-2002, 02:30 AM

You've got several problems; for one, you're returning false regardless of whether the validation has failed or been successful. There are more generic (modular, scalable) ways to do this , but...

function validbutton() {

// make sure they select a radio button

button = -1
for (i=0; i<document.popup.radiobutton.length; i++) {
if (document.popup.radiobutton[i].checked)
button = i
}
if (button == -1) {
alert("You didn't choose a radio button")
return false;
}
else if (button == 0) {
opener.document.form.radiobuttonvalue.value="No";
return true;
}
else if (button == 1) {
opener.document.form.radiobuttonvalue.value="Yes";
return true;
}
}

function validbox() {

// make sure they select the checkbox

if (document.popup.checkbox.checked) {
opener.document.form.checkboxvalue.value="Checked";
return true;
} else {
alert("You didn't select the checkbox")
return false;
}
}

function transferdataout() {

opener.document.form.title2.value=document.popup.title2.value;
opener.document.form.firstname2.value=document.popup.firstname2.value; opener.document.form.secondname2.value=document.popup.secondname2.value;
opener.document.form.lastname2.value=document.popup.lastname2.value;
if (!validbutton()) return false;
if (!validbox()) return false;
self.close();
}

Gary Williams

10-04-2002, 08:21 AM

Thanks to you both for your help.

I have used both solutions on the popup page. That is, I have now written a loop to check which button is selected (and set i=value) and used the modified script. Both work.

I have tried every possible combination of of 'document.write' and 'window.location.href', etc to use this information to select the corresponding radio button on the opener page, but no success as yet. How can I write back to the opener page (radio button)?

Gary

adios

10-04-2002, 05:36 PM

Here's that 'generic' function. To work, the corresponding fields in both documents must have the same names.

<html>
<head>
<title>untitled</title>
</head>
<body>
<form>
<input type="text" name="t1"><br>
<select name="s1">
<option>option 1</option>
<option>option 2</option>
<option>option 3</option>
</select><br>
<input type="radio" name="r1"><br>
<input type="radio" name="r1"><br><br>
<input type="checkbox" name="c1"><br>
<input type="checkbox" name="c1"><br>
<input type="checkbox" name="c2">
</form>
<br><br>
<a href="javascript:void window.open('pop.htm','pop',
'left=200,top=120,width=300,height=230,status=0')">OPEN</a>
</body>
</html>

[pop.htm]

<html>
<head>
<title>untitled</title>
<script type="text/javascript" language="javascript">

function transferdataout(f) {
if (opener && !opener.closed) { //make sure we've got one
var el, e = 0, i, o_f = opener.document.forms[0]; //last is ref to 'slave' form
while (el = f.elements[e++]) { //loop through 'master'
switch (el.type) { //branch for different element types
case 'text' :
case 'textarea' :
if (o_f[el.name]) o_f[el.name].value = el.value; //object check (good idea) & simple string transfer
break;
case 'checkbox' :
case 'radio' :
if (f[el.name].length) { //uh-oh, it's an array!
i = -1;
while (el = f[el.name][++i]) //loop
if (o_f[el.name][i])
o_f[el.name][i].checked = el.checked; //match Boolean 'checked' property
e += i - 1; //done - increment element counter
}
else if (o_f[el.name]) //no array - singlet
o_f[el.name].checked = el.checked;
break;
case 'select-one' : //drop-down
if (o_f[el.name])
o_f[el.name].selectedIndex = el.selectedIndex; //duplicate selection
break;
}
}
}
}

</script>
</head>
<body>
<form>
<input type="text" name="t1"><br>
<select name="s1">
<option>option 1</option>
<option>option 2</option>
<option>option 3</option>
</select><br>
<input type="radio" name="r1"><br>
<input type="radio" name="r1"><br><br>
<input type="checkbox" name="c1"><br>
<input type="checkbox" name="c1"><br>
<input type="checkbox" name="c2"><br><br>
<input type="button" value="Transfer Data Out" onclick="transferdataout(this.form)">
</form>
</body>
</html>

Adapt to suit.

whammy

10-05-2002, 01:34 AM

P.S. Another interesting method that I found out works just by messing around with stuff (yeah, I have too much time on my hands!)...

If you don't feel like looping through radio buttons, set a hidden field to a certain value onclick... i.e.

<input type="radio" onclick="this.form.myhiddenradiovalue.value='blah'" />

and then request the hidden field's value on the next page.

It's not the "correct" way to do it... but it works, and perhaps it could be a simpler alternative at some point.

:D

Gary Williams

10-08-2002, 04:31 PM

Hi Whammy and Adios,

1. I used the '<input type="radio" onclick="this.form.myhiddenradiovalue.value='blah'" />' work around but what I wanted was to actual set the radio buttons on the original page.

2. Thanks to Adios' generic script, I can now do this!

It is safe to say that at this point in time I could not have solved this problem myself as I am not up to writing scripts such as this. I now going through the script, literally line by line, with a javascript text to learn how this works.

One day I shall get there.

Gary

adios

10-08-2002, 04:53 PM

Easier than you think (the nice formatting makes it look more ingenious). ;) Commented it up a bit to help. This:

while (el = f.elements[e++])

...is a simple looping construct that 1)checks for the next (form) element in the collection - f.elements[e] - then 2) runs the loop if there is one & sets el to a reference to that element, necessary because we 3) post-increment (var++) the counter - the postfixing of the operator causes the expression to be evaluated before the increment. Simple; could have just as easily used a for loop.

cheers, adios

Gary Williams

01-23-2003, 01:40 PM

Hi Adios,

Last August you helped me replace 'function transferdataout()' that copied form data in a popup window back into the same named fields in the opener window.

I also use 'function loaddatain()' to populate the popup form (when opened) if data already exists in the main page form. I though all I had to do to replace this function with your code was to edit the lines:

if (opener && !opener.closed) { //make sure we've got one
var el, e = 0, i, o_f = opener.document.forms[0]; //last is ref to 'slave' form

to refer to the parent page instead. Couldn't do it. Tried every combination I could think of. May I beg your help again? I just need to replace 'function loaddatain()'.

Thanks

Gary

---------------------------------------------

My old code:

function transferdataout() {

opener.document.form.title2.value=document.popup.title2.value;
opener.document.form.firstname2.value=document.popup.firstname2.value; opener.document.form.secondname2.value=document.popup.secondname2.value;
opener.document.form.lastname2.value=document.popup.lastname2.value;
if (!validbutton()) return false;
if (!validbox()) return false;
self.close();
}

function loaddatain() {

document.popup.title2.value=opener.document.form.title2.value;
document.popup.firstname2.value=opener.document.form.firstname2.value;
document.popup.secondname2.value=opener.document.form.secondname2.value;
document.popup.lastname2.value=opener.document.form.lastname2.value;
return false

}

---------------------------------------------------

Your good code:

<html>
<head>
<title>untitled</title>
</head>
<body>
<form>
<input type="text" name="t1"><br>
<select name="s1">
<option>option 1</option>
<option>option 2</option>
<option>option 3</option>
</select><br>
<input type="radio" name="r1"><br>
<input type="radio" name="r1"><br><br>
<input type="checkbox" name="c1"><br>
<input type="checkbox" name="c1"><br>
<input type="checkbox" name="c2">
</form>
<br><br>
<a href="javascript:void window.open('pop.htm','pop',
'left=200,top=120,width=300,height=230,status=0')">OPEN</a>
</body>
</html>
--------------------------------------------------------------------------------

[pop.htm]

code:--------------------------------------------------------------------------------
<html>
<head>
<title>untitled</title>
<script type="text/javascript" language="javascript">

function transferdataout(f) {
if (opener && !opener.closed) { //make sure we've got one
var el, e = 0, i, o_f = opener.document.forms[0]; //last is ref to 'slave' form
while (el = f.elements[e++]) { //loop through 'master'
switch (el.type) { //branch for different element types
case 'text' :
case 'textarea' :
if (o_f[el.name]) o_f[el.name].value = el.value; //object check (good idea) & simple string transfer
break;
case 'checkbox' :
case 'radio' :
if (f[el.name].length) { //uh-oh, it's an array!
i = -1;
while (el = f[el.name][++i]) //loop
if (o_f[el.name][i])
o_f[el.name][i].checked = el.checked; //match Boolean 'checked' property
e += i - 1; //done - increment element counter
}
else if (o_f[el.name]) //no array - singlet
o_f[el.name].checked = el.checked;
break;
case 'select-one' : //drop-down
if (o_f[el.name])
o_f[el.name].selectedIndex = el.selectedIndex; //duplicate selection
break;
}
}
}
}

</script>
</head>
<body>
<form>
<input type="text" name="t1"><br>
<select name="s1">
<option>option 1</option>
<option>option 2</option>
<option>option 3</option>
</select><br>
<input type="radio" name="r1"><br>
<input type="radio" name="r1"><br><br>
<input type="checkbox" name="c1"><br>
<input type="checkbox" name="c1"><br>
<input type="checkbox" name="c2"><br><br>
<input type="button" value="Transfer Data Out" onclick="transferdataout(this.form)">
</form>
</body>
</html>
--------------------------------------------------------------------------------