As you see I have the names and ids for the checkboxes generated dynamically for the checkboxes using ‘apptId’ values from each item in the ‘appointmentSchedule’ list.
What I am trying to do is check which of the checkboxes are checked and which are all unchecked. This is the js function I’m calling on clicking the ‘Check’ button.
function confirmAppts(tabNum){
var divEls = document.getElementsByTagName("input");
var i = 0;
for(i=0;i<divEls.length;i++)
{
if (divEls[i].type == "checkbox"){
var tempName = divEls[i].name;
alert(tempName);
var tester = document.frm1.tempName.checked;
alert(tester);
}
}
}
(I had been using those alerts to check and resolve this problem) . This js is however not working. I am getting the name of each of the checkboxes in the form correctly. And when I try using name with the statement to check if the corresponding checkbox is checked or not, I am not getting the ‘tester’ value alerted, which should either be a ‘true’ or a ‘false’ as expected.
To check if the " var tester = document.frm1.tempName.checked; " statement is correct, I just replaced the ‘tempName’ with valid hardcoded value of a checkbox name. This is it
var tester = document.frm1.a404.checked;
alert(tester);
Now this gives me a ‘true’ or a ‘false’ based on whether the checkbox with name ‘a404’ is checked or not correctly. The ‘alert(tempName);’ throws up the same ‘a404’ but then, the ’ var tester = document.frm1.a404.checked; ’ is not giving a true or a false. I’m clueless on why this is happening. Please help me out with this.
function confirmAppts(tabNum){
var divEls = document.getElementsByTagName("input");
var i = 0;
for(i=0;i<divEls.length;i++){
if (divEls[i].type == "checkbox"){
if(divEls[i].checked == true)
alert('checked');
else
alert('not checked')
}
}
}
And if you want to continue with your own way then i think you need to eval the line:
function confirmAppts(tabNum){
var divEls = document.getElementsByTagName("input");
var i = 0;
for(i=0;i<divEls.length;i++){
if (divEls[i].type == "checkbox"){
var tempName = divEls[i].name;
alert(tempName);
var evalVar = 'var tester = document.frm1.' + tempName + '.checked;';
eval(evalVar);
alert(tester);
}
}
}
<script language="javascript">
function checkCBoxes(){
var divEls = document.getElementsByTagName("input");
var i = 0;
for(i=0;i<divEls.length;i++)
{
if (divEls[i].type == "checkbox"){
var tempName = divEls[i].name;
alert(tempName);
var tester = document.frm1.tempName.checked;
alert(tester);
}
}
}
</script>
<form:form id="frm1" name="frm1">
<table class="formtable">
<tr height="35"><td></td></tr>
<tr>
<c:forEach var="appointmentSchedule" items="${appointmentSchedule}">
<td>
<input name="a${appointmentSchedule.apptId}" type="checkbox" id="${appointmentSchedule.apptId}" >
</td>
</c:forEach>
<input type="button" value="Confirm" onClick="checkCBoxes()"/>
</tr>
</table>
</form:form>
FYI, I found that the problem is, the variable ‘tempName’ which I am using to store each of the checkbox elements name is not considered as variable in the ’ var tester = document.frm1.tempName.checked; ’ statement. Instead it is checking for a checkbox element with name tempName which is not actually present in the code.
Yes, I just tried and it is working super fine. Thanks a lot. I have used the first part of your solution. Can you please give some more information on the eval() ? What does it do?
The eval() function evaluates and/or executes a string of JavaScript code.
First, eval() determines if the argument is a valid string, then eval() parses the string looking for JavaScript code. If it finds any JavaScript code, it will be executed.
An among other things, Mozilla’s JavaScript reference for eval says:
Don’t use eval!
eval() is a dangerous function, which executes the code it’s passed with the privileges of the caller. If you run eval() with a string that could be affected by a malicious party, you may end up running malicious code on the user’s machine with the permissions of your webpage / extension.
There are safe alternatives to eval() for common use-cases.
Thank You rajug and pmw57. Let me beware of eval() then. Anyways, as for this case, the first piece of your solution is working super fine. Thanks again.
Is that more appropriate than the following in OP’s particular case?
function confirmAppts(tabNum){
var divEls = document.getElementsByTagName("input");
var i = 0;
for(i=0;i<divEls.length;i++){
if (divEls[i].type == "checkbox"){
if(divEls[i].checked == true)
alert('checked');
else
alert('not checked')
}
}
}
Thank You rajug and pmw57. Let me beware of eval() then. Anyways, as for this case, the first piece of your solution is working super fine. Thanks again.
