AJAX

An array of arrays of of radio buttons

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

Thread Solved

•

Join Date: Jan 2007

Posts: 3,203

Reputation: MidiMagic has a spectacular aura about

Solved Threads: 165

MidiMagic

Offline

Nearly a Senior Poster

An array of arrays of of radio buttons

May 7th, 2007

OK, I know how to address all of the radio buttons on a page as an array, and address all of the radio buttons in a single group as an array. And I know how to create multidimensional objects in JavaScript.

But how can I create a two-dimensional array of radio buttons and address it in JavaScript?

Let's do a simple set of four groups of radio buttons, each with three selections (the actual set I want to use is much larger, but I can scale up the solution). Each group can have only one selection.

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
Group 1:  O A  O B  O C
Group 2:  O A  O B  O C
Group 3:  O A  O B  O C
Group 4:  O A  O B  O C
Group 1:  O A  O B  O C
Group 2:  O A  O B  O C
Group 3:  O A  O B  O C
Group 4:  O A  O B  O C

I want to use for loops to count the number of A selections, the number of B selections, and the number of C selections. I also want to look for diagonal lines of three checked buttons.

What I can't figure out is how to name the button groups in the HTML code so I can address all of them in the loops, yet keep them separate for the purpose of having one radio button selection in each group.

I don't want to use the global array of radio buttons on the page, because the number of buttons above this structure in the webpage will vary. I also want to address them in x-y notation.

Last edited by MidiMagic; May 7th, 2007 at 3:42 am. Reason: I can't edit the title????

Daylight-saving time uses more gasoline

•

Join Date: Jan 2007

Posts: 3,203

Reputation: MidiMagic has a spectacular aura about

Solved Threads: 165

MidiMagic

Offline

Nearly a Senior Poster

Re: An array of arrays of of radio buttons

May 8th, 2007

Nobody knows this?

Also tell me if you don't see any way to do it.

Daylight-saving time uses more gasoline

•

Join Date: Jan 2007

Posts: 3,203

Reputation: MidiMagic has a spectacular aura about

Solved Threads: 165

MidiMagic

Offline

Nearly a Senior Poster

Re: An array of arrays of of radio buttons

May 8th, 2007

I solved it myself.

You build an array of objects, then index that.

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<html>
<head>
<title>Try out the radio</title>
 
<style type="text/css">
<!--
 
.cenx {text-align: center;}
.wfd {width: 100%}
 
img {padding: 24pt;}
body {background-color: #cccccc; padding: 2%; font-family: Arial, sans-serif;}
 
-->
</style>
 
<script type="text/javascript">
 
function sumitup(){
 var xax = [document.forms.vote.appr1c, document.forms.vote.appr2c, document.forms.vote.appr3c, document.forms.vote.appr4c];
 var sum, grp, x, y;
 var acc = Array(3);
 
 sum = 0;
 for(x = 0; x < 3; x++){
  acc[x] = 0;
  for(y = 0; y < xax.length; y++){
   grp = xax[y];
   if(grp[x].checked){
    sum = sum + 1;
    acc[x] = acc[x] + 1;
   };
  };
 };
 alert('A: ' + acc[0] + ', B: ' + acc[1] + ', C: ' + acc[2] + ', TOTAL: ' + sum);
};
 
</script>
 
</head>
<body>
 
<form name="vote" id="vote" action="none">
 <p><fieldset>
  <legend>Block 1</legend>
  <input type="radio" name="appr1c" value="yes" />A
  <input type="radio" name="appr1c" value="yes" />B
  <input type="radio" name="appr1c" value="yes" />C
 </fieldset></p>
 
 <p><fieldset>
  <legend>Block 2</legend>
  <input type="radio" name="appr2c" value="yes" />A
  <input type="radio" name="appr2c" value="yes" />B
  <input type="radio" name="appr2c" value="yes" />C
 </fieldset></p>
 
 <p><fieldset>
  <legend>Block 2</legend>
  <input type="radio" name="appr3c" value="yes" />A
  <input type="radio" name="appr3c" value="yes" />B
  <input type="radio" name="appr3c" value="yes" />C
 </fieldset></p>
 
 <p><fieldset>
  <legend>Block 2</legend>
  <input type="radio" name="appr4c" value="yes" />A
  <input type="radio" name="appr4c" value="yes" />B
  <input type="radio" name="appr4c" value="yes" />C
 </fieldset></p>
 
 <input type="button" id="startx" name="startx" value="GO" onclick="javascript:sumitup()" />
</form>
</body>
</html>
<html>
<head>
<title>Try out the radio</title>

<style type="text/css">
<!--

.cenx {text-align: center;}
.wfd {width: 100%}

img {padding: 24pt;}
body {background-color: #cccccc; padding: 2%; font-family: Arial, sans-serif;}

-->
</style>

<script type="text/javascript">

function sumitup(){
 var xax = [document.forms.vote.appr1c, document.forms.vote.appr2c, document.forms.vote.appr3c, document.forms.vote.appr4c];
 var sum, grp, x, y;
 var acc = Array(3);

 sum = 0;
 for(x = 0; x < 3; x++){
  acc[x] = 0;
  for(y = 0; y < xax.length; y++){
   grp = xax[y];
   if(grp[x].checked){
    sum = sum + 1;
    acc[x] = acc[x] + 1;
   };
  };
 };
 alert('A: ' + acc[0] + ', B: ' + acc[1] + ', C: ' + acc[2] + ', TOTAL: ' + sum);
};

</script>

</head>
<body>

<form name="vote" id="vote" action="none">
 <p><fieldset>
  <legend>Block 1</legend>
  <input type="radio" name="appr1c" value="yes" />A
  <input type="radio" name="appr1c" value="yes" />B
  <input type="radio" name="appr1c" value="yes" />C
 </fieldset></p>

 <p><fieldset>
  <legend>Block 2</legend>
  <input type="radio" name="appr2c" value="yes" />A
  <input type="radio" name="appr2c" value="yes" />B
  <input type="radio" name="appr2c" value="yes" />C
 </fieldset></p>

 <p><fieldset>
  <legend>Block 2</legend>
  <input type="radio" name="appr3c" value="yes" />A
  <input type="radio" name="appr3c" value="yes" />B
  <input type="radio" name="appr3c" value="yes" />C
 </fieldset></p>

 <p><fieldset>
  <legend>Block 2</legend>
  <input type="radio" name="appr4c" value="yes" />A
  <input type="radio" name="appr4c" value="yes" />B
  <input type="radio" name="appr4c" value="yes" />C
 </fieldset></p>

 <input type="button" id="startx" name="startx" value="GO" onclick="javascript<b></b>:sumitup()" />
</form>
</body>
</html>