PDA

Click to See Complete Forum and Search --> : can't access radio buttons in layers

danswebs
08-27-2003, 10:23 AM
I am trying to write a script to change the selected radio button that resides in a form called "myForm", that sets in a division called "myDiv".

I have two rows of radio buttons. Lets call the first set "set1" and the second "set2" (pretty original huh!).
Now, the first radio button in set1 is checked, and likewise for set2. When a user selects another radio button in set one, I want to make sure that the radio button in set 2 is set to it's original position [0]. Again, likewise for set2 when a user selects another radio button, set1 returns to [0] being checked.

Here is my code for the form in a basic page. Can anyone help me figure out how to get it to work in a page as described above?

function radioSwap1() {
var a=radioSwap1.arguments,b="myDiv",c="myForm";
if(a[0] == 1){
document.myForm.set2[0].checked=true;
}else if(a[0] == 2){
document.myForm.set1[0].checked=true;
}
}


Here is my attempt at the solution with cross browser stuff thrown in for good measure...

function radioSwap2() {
var a=radioSwap2.arguments,b="myDiv",c="myForm";
if(a[0] == 1){
(N4)?document.layers[b].document.forms[c].set2[0].checked=true:(I4)?document.forms[c].set2[0].checked=true:document.forms[c].set2[0].checked=true;}
}else if(a[0] == 2){
(N4)?document.layers[b].document.forms[c].set1[0].checked=true:(I4)?document.forms[c].set1[0].checked=true:document.forms[c].set1[0].checked=true;}
}
}

Cheers,
~Dan
Fang
08-28-2003, 07:40 AM
Having two sets of radio buttons reacting as one set seems pointless.
It is a lot more complex than you think - draw a flow chart and find out.
If the two sets of buttons have the same names, there is no problem.
Which ever method you use you still have to check through all the buttons to find the one that is on.
A third alternative is to have an onclick event in each input which fills a hidden input with the value of the radio button.
danswebs
08-28-2003, 10:20 AM
Thanks for the reply, albeit slightly arrogant in tone. As a consultant, I am aware of the complexity of the form that I am creating.

Maybe I should try to give a better description of the problem, and thus show the usefulness of such a form, and that it is by no means pointless.

My first row of radio buttons represents a number "included" in an advanced search form. My second row represents a "high" number in an advanced search form. When a user chooses the first, all result sets that "include" the selected number will be returned. Now, if theuser selects a high number from row two, then all result sets including the selected number and below will be returned.

The reason I need to be able to select the button in position 0 on either row if the opposite row is selected, is so that the user does not try to get search results that include a 7 while also setting the high number to lets say... 4.

Yes, I could set hidden fields to hold the values (as you mentioned), but by not setting the radio buttons back to the initial positions whereby letting them know what value is being passed in to the search, the user may not be able to get the desired result set.

So, if anyone can help me figure out how to change the selected radio button in a layer I would appreciate it greatly.

Cheers,
~Dan
Fang
08-28-2003, 11:01 AM
No arrogance intended, just wondering if alternatives had been considered.
Problems on the forum range from students learning Javascript to consultants with complex problems.
It's not always easy to judge which.

Does this code approximate to a solution:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>2 sets of radio buttons only one on</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<script type="text/javascript">
//<![CDATA[
<!--
var set=0;
var idx=null;
function Check(obj) {
var i=0;
if(!set) { // Initial condition
for(i=0; i<document.myForm.set1.length; i++) {
if(document.myForm.set1[i].checked==true) {
set=1;
idx=i;
}
}
if(!set) { // Set1 not on check Set2
for(i=0; i<document.myForm.set2.length; i++) {
if(document.myForm.set2[i].checked==true) {
set=2;
idx=i;
}
}
}
}
else { // normal check
if(set==1) { //See if set2 switched on
for(i=0; i<document.myForm.set2.length; i++) {
if(document.myForm.set2[i].checked==true) {
document.myForm.set1[idx].checked="";
set=2;
idx=i;
}
}
if(set==1) { // Set1 still on just change idx
for(i=0; i<document.myForm.set1.length; i++) {
if(document.myForm.set1[i].checked==true) {
idx=i;
}
}
}
}
else{ // Set2 was on check Set1
for(i=0; i<document.myForm.set1.length; i++) {
if(document.myForm.set1[i].checked==true) {
document.myForm.set2[idx].checked="";
set=1;
idx=i;
}
}
if(set==2) { // Set2 still on just change idx
for(i=0; i<document.myForm.set2.length; i++) {
if(document.myForm.set2[i].checked==true) {
idx=i;
}
}
}
}
}
}
//-->
//]]>
</script>
</head>
<body>
<form action="#" name="myForm" onclick="Check();">
<br />Set1
<input type="radio" name="set1" />
<input type="radio" name="set1" />
<input type="radio" name="set1" />
<br />Set2
<input type="radio" name="set2" />
<input type="radio" name="set2" />
<input type="radio" name="set2" />
</form>
</body>
</html>
danswebs
08-29-2003, 09:09 AM
Thanks for the interesting code, but it isn't quite what I had in mind.

What I need it to do is work in layers(div). When the user clicks on anything but the 1st radio button in the 1st row, the 2nd row's 1st radio button needs to become checked, and when anything other than the 1st radio button in the 2nd row is selected, then the 1st radio button in the 1st row needs to become selected.

I can accomplish this EXTREMELY easily with very little code if the radio buttons and the form reside in a basic HTML page, but I can't quite get it when they reside in a division.
Fang
08-30-2003, 01:38 AM
In a div makes the code easier:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>2 sets of radio buttons only one on</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<script type="text/javascript">
//<![CDATA[
<!--
function Check(s) {
if(s==1) { // Set1 switched
for(i=0; i<document.myForm.set1.length; i++) {
if(document.myForm.set1[i].checked==true) {
document.myForm.set1[i].checked="";
document.myForm.set2[0].checked=true;
}
}
}
else { // Set2 switched
for(i=0; i<document.myForm.set2.length; i++) {
if(document.myForm.set2[i].checked==true) {
document.myForm.set2[i].checked="";
document.myForm.set1[0].checked=true;
}
}
}
}
//-->
//]]>
</script>
</head>
<body>
<form action="#" name="myForm">
<div id="div1" onclick="Check(1);">
Set1
<input type="radio" name="set1" />
<input type="radio" name="set1" />
<input type="radio" name="set1" />
</div>
<div id="div2" onclick="Check(2);">
Set2
<input type="radio" name="set2" />
<input type="radio" name="set2" />
<input type="radio" name="set2" />
</div>
</form>
</body>
</html>
danswebs
09-01-2003, 11:55 AM
I streamlined the previous code and modified it a little to make it work as needed as you will see below, but I am still having trouble getting the cross browser complience to meet IE 5.x, NN4.79+, and DOM browsers. Any suggestions on the other browsers?

<script type="text/javascript">
//<![CDATA[
<!--
function Check2(s) {
if(s==1) { // Set1 switched
document.myForm2.set4[0].checked=true;
} else { // Set2 switched
document.myForm2.set3[0].checked=true;
}
}
//-->
//]]>
</script>

Cheers,
~Dan Bish
Fang
09-01-2003, 12:07 PM
The code should work in all the browsers mentioned.
Your code leaves the clicked row on, I thought the idea was to switch it off.
danswebs
09-01-2003, 02:10 PM
Actually, I wanted the one set returned to position [0] while the other remained where you clicked.

The code is cross browser complient for this situation. Thanks for pointing that out. Another situation needs more thought though...

Once I took the form tag out of the layer I could access form elements just fine. In most instances of my code this will be satisfactory. Other instances have another level of difficulty in that their could be multiple forms located "inside" the layer, so knowing how to modify form elements inside a layer accross browsers would help. I will put an example of HTML to explain this below.

Any thoughts on how to access a form and its elements "inside" a division?

Cheers,
~Dan


================================================
| The following is an example of a chunk of
| code that will certainly come up in
| development
================================================

<div id="mydiv">
<form action="#" name="myForm"> Set1<br>
<input type="radio" name="set1" onclick="myCheck(1);" />
<input type="radio" name="set1" onclick="myCheck(1);" />
<input type="radio" name="set1" onclick="myCheck(1);" />
<br>Set2<br>
<input type="radio" name="set2" onclick="myCheck(2);" />
<input type="radio" name="set2" onclick="myCheck(2);" />
<input type="radio" name="set2" onclick="myCheck(2);" />
<br>
<input type="radio" name="set3" onclick="myCheck(2);" />
<input type="radio" name="set3" onclick="myCheck(2);" />
<input type="radio" name="set3" onclick="myCheck(2);" />
</form>
<form action="#" name="myForm2">
Search box<br>
<input type="text" name="search1" />
<input type="submit" name="submit" />
</form>
</div>