...

View Full Version : Dynamic checkbox array problem



abduraooft
12-16-2007, 05:15 PM
Hello,

I've a checkbox validation script to check for at least one ckeck.

<script type="text/javascript">

function chkChecks(){
isChecked=false
alert(document.forms["form1"]["checked[]"].length);
for(var i=0;i<document.forms["form1"]["checked[]"].length;i++){
if(document.forms["form1"]["checked[]"][i].checked){
isChecked=true
}
}

if(isChecked){
document.forms["form1"].submit()
}
else{
alert('Please select a checkbox')
}

}

</script>
for the form
<form name="form1" action="test.php">
<input type="checkbox" name="checked[]" value="1">
<input type="checkbox" name="checked[]" value="2">
<input type="checkbox" name="checked[]" value="3">
<input class="button_140" type="button" value="Check" onclick="chkChecks()">
</form>
It works well for more than one checkboxes, but these are generated dynamically by PHP and if there is only one checkbox, document.forms["form1"]["checked[]"].length returns 'undefined'.

Can I modify this to work in all cases?

thanks,
art.

Trinithis
12-16-2007, 07:14 PM
Remeber to always use the var keyword when defining variables. That was not the problem, but someday it will.

Your name property should have been a valid JavaScript identifier. I removed the []'s from their names. (This also was not the problem.)

Here's some code that works.



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
</head>

<body><div>

<form name="form1" action="test.php">
<input type="checkbox" name="checked" value="1">
<input type="checkbox" name="checked" value="2">
<input type="checkbox" name="checked" value="3">
<input class="button_140" type="button" value="Check" onclick="chkChecks()">
</form>


<script type="text/javascript">

function chkChecks() {
var isChecked = false;
var f = document.forms.form1;
var c = f.checked;
c = c.length ? c : [c];
alert(c.length);
for(var i = 0; i < c.length; ++i)
if(c[i].checked)
isChecked = true;
if(isChecked)
f.submit();
else
alert('Please select a checkbox');
}

</script>


</div>
</body>
</html>

abduraooft
12-17-2007, 08:14 AM
Hmm.. that works, but I have an associated server-side script to process these checkbox values. When I pass $checked through foreach() in php it says

Warning: Invalid argument supplied for foreach() , since $checked is not an array.
I found a solution as put a hidden control with same name to ensure the array property for field name (checked), but then I've to check if($checked[$i]). Any other workarounds?
BTW please let me know the meaning of expression c = c.length ? c : [c]; .
thanks,

Kor
12-17-2007, 09:17 AM
checked is a reserved javascript word. You should avoid using javascript reserved words for name, id, variables, functions and arguments.

vwphillips
12-17-2007, 09:43 AM
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
</head>

<body><div>

<form name="form1" action="test.php">
<input type="checkbox" name="checked[]" value="1">
<input type="checkbox" name="checked[]" value="2">
<input type="checkbox" name="checked[]" value="3">
<input class="button_140" type="button" value="Check" onclick="chkChecks('checked[]')">
</form>


<script type="text/javascript">

function chkChecks(nme) {
var isChecked = false;
var f = document.forms.form1;
var c = document.getElementsByName(nme);
c = c.length ? c : [c];
alert(c.length);
for(var i = 0; i < c.length; ++i)
if(c[i].checked)
isChecked = true;
if(isChecked)
f.submit();
else
alert('Please select a checkbox');
}

</script>


</div>
</body>
</html>

Kor
12-17-2007, 09:59 AM
And the explanation for the vwphillips's solution:

The classical reference (document.formname.elementname) returns the length of a checkboxes' group with the same name as being 0, probably because there is no serious reason for using the same name for more than one element, except for the radio groups.

The DOM getElementsByName() bypasses this problem...

abduraooft
12-17-2007, 02:52 PM
Thank you so much vwphillips & Kor. That works a treat!

Owl
12-17-2007, 06:58 PM
checked is a reserved javascript word...
?????????????

Owl

Trinithis
12-17-2007, 07:05 PM
Not reserved
http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Reserved_Words

Kor
12-17-2007, 10:12 PM
checked is a javascript native attribute. It is a wise habit to avoid them when naming anything else custom... Do you want troubles? :rolleyes: Do it... You may try it also with, say, the method submit ... IE woun't like it. I might give you tones of examples, but believe me, stay away of using methods/attributes words same as your variables/functions/arguments... You don't believe me? You are free to test... Always there is room for reinventing the wheel. :)

Trinithis
12-17-2007, 10:36 PM
I agree that the identifier checked may be used. (And since it is, stay away from it unless defined on a custom object or know what you are doing.) My case is simply that it's not reserved. For example, although extremely bad code, it is still legal to do


var parseInt = function() {return 0;};

However, this is not legal:


myObject.super = RegExp;

smgokmen
01-19-2012, 09:54 AM
<form ... onSubmit="return formCheck()">
<input type="checkbox" value="<?=$variable?>" name="chkbskid[]">
</form>
<script>
function formCheck(){
var isChecked=false;
var chkbsk=document.getElementsByName("chkbskid[]");

for (var i=0; i<chkbsk.length; i++)
{
if (chkbsk[i].checked){
isChecked=true;
}
}
if (!isChecked){
alert ("Please select at least one value");
return false;
}

}
</script>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum