Forum Moderators: open
I am having a problem with my checkbox using javascript. If anyone sees the problem, please let me know.
Everything works great if more than one checkbox is checked. In other words, checking two checkboxes sets the "BoxChecked" variable to true (this is what I want).
However, if I check only one checkbox, the "BoxChecked" variable is set to false (this is not want I want) - I want it to be set to true.
In other words, if any checkbox is checked (regardless it's one or more), BoxChecked should be set to true.
Note: The name of my form is called "myform" and the name of my checkbox elements is called "check".
function confirmDelete()
{
var BoxChecked = false;
for (var i=0; i < document.myform.check.length; i++)
{
if (document.myform.check[i].checked)
{
BoxChecked = true;
break;
}
}
if (BoxChecked == true)
{
var agree=confirm("Are you sure?");
if (agree) return true ;
else return false ;
}
if (BoxChecked == false)
{
alert("Please check a box.");
}
}
thanks in advance!
function confirmDelete()
{
var checks = document.myform.check;
for (var i=0; i < checks.length; i++)
if (checks[i].checked)
return confirm("Are you sure?");
/* default */
alert("Please check a box.");
return false; /* best to return explicit false to stop submission */
}
Just to give a little more background, my checkboxes are created dynamically, so that any given time there can be one or more checkboxes, depending on what's in the database at the time.
I just noticed that everything works ok, when more than one checkbox is shown on my form (two or more checkboxes).
However, when only one checkbox is shown on the form and I select it, the code will default to alert("Please check a box."); - even though it's checked.
Again, if the form had two checkboxes shown, and I select only one, it works fine which I get "return confirm("Are you sure?");".
Any other suggestions?
<html>
<head>
<title>None</title>
<link href="MAINSTYLE.CSS" rel="stylesheet" type="text/css">
</head>
<body>
<div align="center">
<script LANGUAGE="JavaScript">
<!--
function confirmDelete()
{
var checks = document.myform.check;
for (var i=0; i < checks.length; i++)
if (checks[i].checked)
return confirm("Are you sure?");
/* default */
alert("Please check a box.");
return false; /* best to return explicit false to stop submission */
}
// -->
</script>
<form name="myform" action="/links/prMain.php" method="post">
<table>
<tr>
<td>
<table>
<tr>
<td>
<input type="image" SRC="images/modify.gif" name="Modify" title="Modify Link" onClick="return confirmDelete()">
<input type="image" SRC="images/delete.gif" name="Delete" title="Delete Link" onClick="return confirmDelete()"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>
<table>
<tr>
<td> <INPUT TYPE=CHECKBOX id="check" NAME="linkarray[]" VALUE=33></td>
<td> <a href=http://dsad.com title=http://dsad.com target="_blank">dsad</a></td>
<td> dsad</td>
<td> test777</td>
<td> 2005-03-11</td>
<td> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
The checkbox's name isn't 'check' - that's it's id.
The name is 'linkarray[]'.
Change the first line of the function to:
var checks = document.myform['linkarray[]'];
I think it's because of the square brackets [] in linkarray[]. I tried it again using different variations and still does not work. Weird?
I read somewhere that you can use the id to reference a checkbox. Which seemed to have worked, except when only one check box exist in my form.
Any other suggestions?
function confirmDelete()
{
var checks = document.myform.elements['linkarray[]'];
for (var i=0; i < checks.length; i++)
if (checks[i].checked)
return confirm("Are you sure?");
/* default */
alert("Please check a box.");
return false; /* best to return explicit false to stop submission */
}
My link to now looks like <INPUT TYPE=CHECKBOX NAME="linkarray[]" VALUE=33></td>, not <INPUT TYPE=CHECKBOX id="check" NAME="linkarray[]" VALUE=33></td> as before.
Everything still works the same.
However, you are referencing form elements via the elements collection, instead of directly off the form. This is in fact slightly more 'correct'. I didn't introduce this so as not to add confusion. In my tests, though, and as usual, the script works exactly the same way when 'elements' is left out, like I did.
It's worth noting that the script won't work when there is only one such element, because a reference to the element itself is returned, not a collection.
The truly up-to-date way to do this would be to use getElementsByName('linkarray[]'). This can't be used on the form, but I guess there's no other elements on the page called that.
document.getElementsByName('linkarray[]')
The difference is that a collection is returned, even if there is only one element.
This way leaves out version 4 browsers, while the old-fashioned way we are using works across the board.
I spent a few days trying to figure this out. Without your help, I think it might have been a lot longer, if ever, at my pace. Thanks again.
