HELP on checkboxes in Javascript
Hi, I need some help on this javascript. I have attached the script with this posting. Appreciated if somebody could help.
Here's what I tried myself, but it doesn't work. If one or more checkboxes is checked, there would be a pop-up says "checked", if none is checked, the pop-up should say "unchecked". Currently, it's not working. I need someone with more experience who can point out what I should do. Thanks.
<html>
<head><title>multiple checkboxes</title>
<script type="text/javascript">
<!--
function validate_form()
{
if(document.getElementsByName("items[]").checked)
{
alert("checked");
}
else
{
alert("unchecked");
}
}
-->
</script>
</head>
<body>
<form name="form1" method="post" action="<?=$SERVER['PHP_SELF']?>">
<table>
<tr>
<td width="200"><input type="checkbox" name="items[]" value="1">item1</td>
<td width="200"><input type="checkbox" name="items[]" value="2">item2</td>
<td width="200"><input type="checkbox" name="items[]" value="3">item3</td>
</tr>
<tr>
<td align="center"><input type="button" name="submit_button" value=" Save " onclick="validate_form()"></td>
</tr>
</table>
</body>
</html>
[1469 byte] By [
jfernandez] at [2007-11-20 0:32:30]
# 1 Re: HELP on checkboxes in Javascript
That is because they all have the same name. You need to keep the same name for form purposes but give them a different ID and then use getElementById to get them.
Notes:
1. $_SERVER['PHP_SELF'] not $SERVER['PHP_SELF'].
2. Terminate your form tags.
<html>
<head>
<title>multiple checkboxes</title>
<script type="text/javascript">
function validate_form(){
var ischecked = 0;
for(i=1;i<=3;i++){
var curid = "item" + i.toString();
if(document.getElementById(curid).checked){ischecked = 1;}
}
if(ischecked == 1){alert("One or more is checked!");}
}
</script>
</head>
<body>
<form name="form1" method="post" action="<?=$SERVER['PHP_SELF']?>">
<table>
<tr>
<td width="200"><input type="checkbox" name="items[]" id="item1" value="1">item1</td>
<td width="200"><input type="checkbox" name="items[]" id="item2" value="2">item2</td>
<td width="200"><input type="checkbox" name="items[]" id="item3" value="3">item3</td>
</tr>
<tr>
<td align="center"><input type="button" name="submit_button" value=" Save " onclick="validate_form()"></td>
</tr>
</table>
</form>
</body>
</html>
# 2 Re: HELP on checkboxes in Javascript
thanks peejavery for the reply. the $SERVER should be $_SERVER and I should close the form </form>.
The problem of my script is I don't usually know how many of them are there. The number of the checkboxes are acutally generated by my PHP script. I could use your script if I tweak my PHP code a little bit (by getting the number of checkboxes first and do just what you did). Just wonder if there's another way of not looping through the number of checkboxes and get the job done? Thanks.
# 3 Re: HELP on checkboxes in Javascript
peejavery, if I don't get a better solutions, I'll use yours. I will get the number of checkboxes first, add "id" in html and do what you just did. thanks very much.
# 4 Re: HELP on checkboxes in Javascript
If you using PHP, you can easily autogenerate the JavaScript as well.
1. Use a variable integer that increases by 1 every time.
2. Input that into your outputted HTML. Below is an example.
<?php
$varint = 1;
$varint++;
echo "<input type="checkbox" name="items[]" id="item$varint" value="1">";
// use numofchecks for the JavaScript for() function.
echo "
<script language='JavaScript'>
var numofchecks = $varint;
</script>
";
?>
# 5 Re: HELP on checkboxes in Javascript
thanks.
My html is generated by PHP and number of the checkboxes are actually from MySQL query. I can I can modify my PHP a little and use your way to make this work. I though Javascript would have simpler(cleaner) way to achieve what I want. But your way works. thanks.
# 6 Re: HELP on checkboxes in Javascript
You're welcome. Good luck!
# 7 Re: HELP on checkboxes in Javascript
peejavery, I tried your way yesterday and it worked for me. It's in a very awkward way but it's the only way to work now. Thanks very much. I don't have the code with me since it's in my home machine.
Here's how I did in my code
1) Do the database query in PHP and get the number of checkboxes and their values returned.
2) Then write the javascript in PHP in the following way to check if each checkbox is checked in a for loop. I have to hard code the id of each checkbox and concatinate the number like (1 ... n) since I know the total number now. (just like in your previous note)
echo "<script type=\"text/javascript\">";
echo "function validate_form(){";
echo "var num_of_checks = $num_from_db;";
echo "for(i=1; i<num_of_checks;i++){";
.
I use getElementById here.
.
echo "}";
echo "</script>";
3) Then I dynamically construct the checkboxes in PHP with the same id name in the above javascript.
The problem is I have multiple set of checkboxes in the same page and I have to do that same stuff for each set of checkboxes. I can't put them in a javascript file. More awkward is I have another page which has the pretty much the same thing. So I have to do that for the other page. Lots of hardcoding.
I hope I described that clearly.
I usually put my javascript between <head> and </head>. With this, I have to spread my javascript in a few places in the file and between <head> and </head>, I have to do something like,
function validate_all()
{
if(!validate_checkboxes1() ||
!validate_checkboxes2() ||
!validate_checkboxes3())
{
return false;
}
else
{
document.submit; // something like that
}
}
It's all working now, although it's hard to maintain. Thanks for your help.
# 8 Re: HELP on checkboxes in Javascript
It's all working now, although it's hard to maintain. Thanks for your help.
You're welcome. Im glad that you got it to work. Keep doing your best. If you ever need help, this is the place to be.
