Checkbox arrays and JS

[swallace]

I'm trying to get a set of checkboxes to check other boxes, however I'm having big trouble in that I can't get the Javascript function to check a box that is named as an array...

<INPUT TYPE='checkbox' name=\"".$row[TestType]."[$i]\">

This generates source code like:

Regression[0]
Regression[1]
etc

When I select one of the controller checkboxes, this function is called:

function checkBoxValidate(cb, count) {

if (eval("document.myform." + cb + ".checked") == true)
{

//alert("checked");
for (j = 0; j < count; j++)
{

alert("document.myform3.elements[" + cb + '[' + j + ']' + "].checked = true");

eval("document.myform3.elements[" + cb + '[' + j + ']' + "].checked = true");

}

}
else
{
...

The code that calls the function is:

print"<TD>Check All $row_1[TestType]<input type=checkbox name=\"".$row_1[TestType]."\" onClick=javascript:checkBoxValidate(name,loopCount[$x])></TD>";

I've had it working when the checkbox were all named the same, however PHP didn't seem to pick up the values on the next page.

Any ideas?

[goa103]

hi,

if (eval("document.myform." + cb + ".checked") == true)

is cb named as Regression[] ? Regression alone doesn't work.
cb = document.all ["Regression[]"]; // OK
cb = document.all ["Regression"]; // ERROR

for (j = 0; j < count; j++)

you shouldn't use reserved-like words: count means the function count. to get the length of a cb object, use the length property:
cb.length

alert("document.myform3.elements[" + cb + '[' + j + ']' + "].checked = true");

cb .checked should work fine now. I use 'i' as a standard counter (commonly used by mathematician), next is j, k... useful for nested loops.

eval("document.myform3.elements[" + cb + '[' + j + ']' + "].checked = true");

RULE: avoid Copy & Paste when it comes to debug JAVASCRIPT. if the first line has is a WARNING error, the next one COULD BE A FATAL ERROR. your script won't work. try to use a temp variable to store that value, the checked boolean value for example.

RULE: do not NEST your PHP and HTML code

replace
<INPUT TYPE='checkbox' name=\"".$row[TestType]."[$i]\">
by
...HTML...<INPUT TYPE="checkbox" NAME="<?= $row ['TestType'] ?>[<?= $i ?>]">...HTML...

so you can clearly read your HTML and PHP code. for example [$i] could mean something special in PHP (because {$i} means something special).

BUG: $row [TestType], does it work without '' ?

ADVICE: don't use a NAME to identify a ROW, use an ID:

$row ['TestType'] -> $row ['idType'], something like that 🙂

Common error is to forget about the [], to get a wrong cb object or nest your php and html code 😃

JM

[swallace]

Cheers for the advice, and I agree with it all... :p

As for the nested PHP code, I agree, but the code I'm working on is legacy stuff and it would take a fair bit to redo it now. Future pages I'll change them this way.

I've actually got it working in the last 20 minutes or so using the

document.myform.elements[j].checked

Where I added to the js function where to start and stop the loop.

Now, on the next page I'm coming up with the problem of not being able to access the name of the checkbox from the previous page. It's working fine I write the static code, but dynamically nothing appears...oh well, life goes on...

[MrAlaska]

Naming inputs with brackets looks funny to me. It's not much harder to code (if at all) to name them sequencially then retrieve them with variable variables and reduce such problems.

[tomhath]

Your code is way too complicated with all those evals, etc. THis works for me:

<script>
function checkBoxValidate(cont, cb, numBoxes) {
for (j = 0; j < numBoxes; j++) {
document.myform3.elements[cb + "[" + j + "]"].checked = cont.checked;
}
}
</script>

Check All <input type=checkbox name="controller" onClick="javascript:checkBoxValidate(this, 'Regression', 2)">

<form name="myform3">
<INPUT TYPE='checkbox' name="Regression[0]">
<INPUT TYPE='checkbox' name="Regression[1]">
</form>

[goa103]

hi,

for (j = 0; j < numBoxes; j++) {

why the hell do you need numBoxes ? the object itself knows its length. use the length property.

dynamic

when the form is submitted the PHP variable that contains the cb/array doesn't know anything about checked. it all depends of what you want to do. most of the time you use checkboxes to select rows. why would you need to know the checked states of each checkboxes in a PHP script ?

JM

[tomhath]

for (j = 0; j < numBoxes; j++) {

why the hell do you need numBoxes ? the object itself knows its length. use the length property.

What object? These are individual HTML elements, aren't they?

dynamic

when the form is submitted the PHP variable that contains the cb/array doesn't know anything about checked.

Huh? This is all javascript...

[goa103]

hi,

What object? These are individual HTML elements, aren't they?

no if you use [] in your HTML, it creates an ARRAY not n variables. so if you name your CHECKBOX MyCb[], then you can access it as an array in your JS script:

<INPUT TYPE="checkbox" NAME="MyCb[]" VALUE="Checkbox 1">
<INPUT TYPE="checkbox" NAME="MyCb[]" VALUE="Checkbox 2">
<INPUT TYPE="checkbox" NAME="MyCb[]" VALUE="Checkbox 3">
<SCRIPT LANGUAGE="JavaScript">

cb = document.all ["MyCb[]"];

for (i = 0; i < cb.length; i ++)
{
document.write ("Checkbox n°" + i + " value is: " + cb .value);
}

</SCRIPT>

and voilà 🙂
the MyCb[] HTML checkbox is a simple JavaScript array (an object). That object has the length and value properties. length contains the number of elements in the array, the checkbox object (actually 3) and value is the value of the current element. you use it like an array! that's why you don't need to play with cb + "[" + i + "]"... It's nonsense

I advice you to read a JavaScript book, MSDN is a good start for that! It has a complete JS reference, objects, properties... very nice.

Huh? This is all javascript...

oh sorry I thought you also wanted to use checkboxes in PHP.

I hope it will work from now!
JM

[tomhath]

Yea, making the checkboxes an array instead of naming them from php as in the original poster did is probably better.

I don't usually use arrays of elements directly, I prefer to make a javascript class of my own and have the element as one of it's attributes, then use an array of my own objects. Gives a generic way to extend the elements (really just a wrapper or decorator class).

[goa103]

hi,

really just a wrapper

well you should only wrap the object you HAVE TO extend. As long as you don't need to, you shouldn't do it. Otherwise all your objects are wrapped and it's useless. It's slowdown your application and It's harder to understand what it does. However I wonder if you can inherit a class... Like creating a new Checkbox class that extends the JS one. No ? That would be great because It has some bugs. For example if there's only 1 checkbox, the object is not an array of checkbox but a simple checkbox! Wouah it's so logicial, even if you use brackets. So I simply created a function that convert that checkbox to an array... So cool 🙂. But anyway I don't think you can extend it because the browser creates the JS object, not you.

From now on, you're Lord Of The Checkboxes,
JM ~ But you're script is not on fire :p (Ice Age) ~

[tomhath]

If all you need is simple checkboxes, maybe even with a couple of event handlers, then obviously there's no reason to put a wrapper around them.

But if you need more powerful elements (any element, not just checkboxes) it makes sense to start using OO techniques to extend them. A single constructor can add all the event handlers, validation, state information, all kinds of other attributes, interaction with other elements, etc without really ugly multiline HTML elements. Wrapping them all into a class keeps it modular and organized.

By the way, Decorator classes are a lot different then simply extending the class (although IE does allow you to extend them with Behaviors).

[Tanus]

I've stumbled on this thread as it seems like the only place on the net to have anything about this topic 😉. I'm trying to do something similar, that is to check a group of checkboxes when I click on one. However, under mozilla I can't for some reason access the checkbox array by doing document.form.elements["cbname[]"] . This returns "undefined". I can access the array by using the actual index, but I'd prefer not to use this method. Also, document.all["cbname[]"] doesn't work either, as document.all is an IE only call.

[goa103]

hi,

oops I forgot about document.all & browser compatibility. does anyone know a good reference about cross-browser HTML/JS development ?

thanks,
JM

ps: about your document.form.elements, it works for me on IE but I never tried with Mozilla. It probably works on Netscape too.

[Tanus]

Hmm, I'll clarify that a little...

Accessing by

document.form.elements["cbarray[]"];

doesnt work, however

document.form.elements[0];

where cbarray[] is the 0th element on the form, it will work. Obviously this is bad because it means I have to hardcode which number element the checkbox is. Is there a way I can use ID or something in the checkbox to get things working a bit better?

[goa103]

hum hum... my god these browsers all suck 🙂. I mean I only use IE and I used to develop both for IE and Netscape 4.7+ and I had so many problems!

anyway I read Netscape JS Reference and the form collection doesn't exist, it's forms.

here is a little script I use:

<HTML>
<BODY>

<SCRIPT LANGUAGE="JavaScript">

function UpdateName ()
{
// document.all ["sName"].value = "Mickey Mouse";
// alert (document.forms ["formName"].elements ["sName"].value);
alert (document.forms.elements);
}

</SCRIPT>

<FORM NAME="formName" ACTION="" METHOD="post">
Name:<INPUT TYPE="text" NAME="sName" VALUE="Jean-Marc Molina">
<INPUT TYPE="submit" NAME="submit">
</FORM>
<BUTTON ONCLICK="javascript:UpdateName ();">Update name</BUTTON>
</BODY>
</HTML>

document.all ["sName"].value = "Mickey Mouse";

très pratique mais uniquement IE

document.forms ["formName"].elements ["sName"].value

IE et Netscape mais faut nommer le form sinon on peut pas y accéder. enfin par form.elements [] j'ai pas réussi

on va dire que c quand même le bordel 🙂
JM

[Tanus]

Hehe, I don't understand much of french past an 8th grade level, and that was about 8 years ago so I have no idea what the last past of that post was, but I tried it using forms["formname"].elements["elementname"] and it seems to be working. I guess I'll just add a little js check for browser type.

[jackinva]

I was confused with the document.all until I saw it was an MSIE specific item. Through some testing I have been able to take a checkbox form field called categoryID[] to have an uncheck all javascript function that works under both Netscape 6.22 and IE 5.5 on MacOS X. Thought it might be helpful for others:

JAVASCRIPT:

function searchCategoriesUncheckAll() {
categoryIDArray = document.forms["searchForm"].elements["categoryID[]"];
for (i=0; i < categoryIDArray.length; i++) {
categoryIDArray.checked=false;
}
}

Thanks again for those that started this thread as it has helped me.