Iterate multidimensional checkbox array

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
Benjamin
Site Administrator
Posts: 6935
Joined: Sun May 19, 2002 10:24 pm

Iterate multidimensional checkbox array

Post by Benjamin »

I'm trying to Iterate a checkbox array, but the total is always 0 :(

Code: Select all

    var total = 0;
    for (var i = 0; i < document.form_name.style.length; i++)
    {
        for (var x = 0; x < document.form_name.style[i].length; x++)
        {
            if (document.form_name.style[i][x].checked)
            {
                total += 1;
            }
        }
    }
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

Can you provide the HTML it is working against?
User avatar
Benjamin
Site Administrator
Posts: 6935
Joined: Sun May 19, 2002 10:24 pm

Post by Benjamin »

I'll see if I can grab it today, otherwise I'll post it Monday.
User avatar
Gente
Forum Contributor
Posts: 252
Joined: Wed Jun 13, 2007 9:43 am
Location: Ukraine, Kharkov
Contact:

Post by Gente »

Code: Select all

function count_calc()
{
  var total = 0;
  for (var i = 0; i < document.bar.length; i++)
  {
    if (document.bar.elements[i].type == 'checkbox')
    {
      total += 1;
    }
  } 
}
User avatar
Benjamin
Site Administrator
Posts: 6935
Joined: Sun May 19, 2002 10:24 pm

Post by Benjamin »

Thank you for the snippet, I'd rather know why mine is failing.

Here is an html sample..

Code: Select all

<form action="#" method="post" name="form_name">
<input name="style[3563447][2]" type="checkbox" onclick="return count_total();"value="1"/>
<input name="style[3563447][1]" type="checkbox" onclick="return count_total();"value="1"/>
<input name="style[3563447][8]" type="checkbox" onclick="return count_total();"value="1"/>
<input name="style[3563447][4]" type="checkbox" onclick="return count_total();"value="1"/>
</form>
User avatar
Gente
Forum Contributor
Posts: 252
Joined: Wed Jun 13, 2007 9:43 am
Location: Ukraine, Kharkov
Contact:

Post by Gente »

Because as far as I know such name 'style[3563447][2]' doesn't mean you get an array in JS. We were discussing relative problems some threads ago.
Every form has elements property that is an associative array of all the inputs in the form.
document.form.input_name just an alias so it should be an input, not the array.
Also if you working with forms you can check this page - http://developer.mozilla.org/en/docs/DOM:form
I think it will be useful
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

form_name.style won't exist (as an element of the form.) Each of the names is unique therefore not an iterable array. You'll need to iterate the element list of the form like Gente shows.
User avatar
Benjamin
Site Administrator
Posts: 6935
Joined: Sun May 19, 2002 10:24 pm

Post by Benjamin »

Ok, well that works ok, but there are still a few features I would like to add and I thought using the array indexes would be the best route. I believe this is why I am not fond of Javascript.

Say I have some HTML like this..

Code: Select all

<form action="#" method="post" name="form_name">
<input name="style[3563447][2]" type="checkbox" onclick="return count_total();"value="1"/>
<input name="style[3563447][1]" type="checkbox" onclick="return count_total();"value="1"/>
<input name="style[3563447][8]" type="checkbox" onclick="return count_total();"value="1"/>
<input name="style[3563447][4]" type="checkbox" onclick="return count_total();"value="1"/>

<input name="style[3563448][2]" type="checkbox" onclick="return count_total();"value="1"/>
<input name="style[3563448][1]" type="checkbox" onclick="return count_total();"value="1"/>
<input name="style[3563448][8]" type="checkbox" onclick="return count_total();"value="1"/>
<input name="style[3563448][4]" type="checkbox" onclick="return count_total();"value="1"/>
</form> 
What would be the best way to ensure that style [3563447][2] and [3563448][2] cannot both be checked at the same time. I can't use radios and it's already done server side. I would like to add this on the client side as well.
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

You'll have to check the name of the element firing the event and match it against the other elements sharing the names.
User avatar
Benjamin
Site Administrator
Posts: 6935
Joined: Sun May 19, 2002 10:24 pm

Post by Benjamin »

Screw it.
Post Reply