An array of arrays of of radio buttons

Expand Post »

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.

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????

Similar Threads

Help using looping in JS in JavaScript / DHTML / AJAX
Little confusion in multiple checkboxes in JavaScript / DHTML / AJAX
Arrrgggghhhh... Radio Buttons are the bain of my life! Can someone please help. in ASP
dynamically generated textboxes & radio buttons php, insert into db in PHP
Javascript Arrays in JavaScript / DHTML / AJAX

MidiMagic

Reputation Points: 730

Solved Threads: 181

Nearly a Senior Poster

Offline

3,314 posts
since Jan 2007

Permalink

May 8th, 2007

Re: An array of arrays of of radio buttons

Nobody knows this?

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

MidiMagic

Reputation Points: 730

Solved Threads: 181

Nearly a Senior Poster

Offline

3,314 posts
since Jan 2007

Permalink

May 8th, 2007

Re: An array of arrays of of radio buttons

I solved it myself.

You build an array of objects, then index that.

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>

Last edited by MidiMagic; May 8th, 2007 at 3:00 pm.

MidiMagic

Reputation Points: 730

Solved Threads: 181

Nearly a Senior Poster

Offline

3,314 posts
since Jan 2007

This thread is solved

Either the thread starter or a moderator has marked this thread as solved. You can most likely trust the responses and answers given. There is most likely no reason for any further responses to be posted here. If you have a related question, please start a new thread in this forum instead.

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: Frames

Next Thread in JavaScript / DHTML / AJAX Forum Timeline: JS generated page 'save as' issues

DaniWeb Message

Cancel Changes

User Name
Password