Loop through checkboxes, verify those present & skip those not?

[we5inelgr]

Hi all,

I couldn't figure out how to describe this question in the title. Sorry for any confusion there might be.

I have a form that has checkboxes next to images. If checked, the image will be deleted upon form submit. There are always 10 images possible, however, some images will not always be present. If they are not present (the image), then a repsective delete checkbox will not be shown.

The problem I'm running into is that this js will fail for undefined when it hits a "missing" checkbox.

the relevent HTML

<form name="photos" onsubmit="return verify_photos()">
<input type="checkbox" name="deletePhoto1">
<input type="checkbox" name="deletePhoto2">
<input type="checkbox" name="deletePhoto3">
<input type="checkbox" name="deletePhoto4">
<input type="checkbox" name="deletePhoto5">
<input type="checkbox" name="deletePhoto6">
<input type="checkbox" name="deletePhoto7">
<input type="checkbox" name="deletePhoto8">
<input type="checkbox" name="deletePhoto9">
<input type="checkbox" name="deletePhoto10">
</form>

The JS

function verify_photos() {
 for (h=1;h<=10;h++) {
 if (photos["deletePhoto" + h].checked) { //**** Fails here if a cooresponding photo[h] checkbox isn't present. ****//
  var answer=confirm("Are you sure you would like to delete the checked photo(s)?"); 
  if (answer) {

  } else {
  for (i=1;i<=10;i++) {
 if (photos["deletePhoto" + i].checked) {
   photos["deletePhoto" + i].checked = false;
 }
  }
  return false;
  } 
 } 
 return true;
 } 
} 

How can I skip over undefined (i.e. not there) checkboxes?

Thanks!

[lucy24]

Does it work if you add an extra loop?

if (photos["deletePhoto" + h].checked)

>> EXPAND TO

holder = document.getElementById(photos["deletePhoto" + h])
if (holder)
{ now see if it's checked }

My fingers automatically typed "Id". Why are you using "name" here? I tend to associate the name attribute with groups, like radio buttons that all share the same name.

When some of the 10 are missing, are they missing from the end, or could it be anywhere? Like 3,4,5 here, 6 missing, 7,8 here, 9 missing, like that? If they were sequential it would a lot easier because you could give them all the same name and then do something involving "for i < checkboxes.length". But you said "skip over" implying that the missing boxes could be anywhere.

[Fotiman]

function verify_photos() {
  for (h = 1; h <= 10; h++) {
    if (photos["deletePhoto" + h] != null &&
      photos["deletePhoto" + h].checked) {
      var answer = confirm("Are you sure you would like to delete the checked photo(s)?");
      if (!answer) {
        for (i = 1; i <= 10; i++) {
          if (photos["deletePhoto" + i] != null) {
            photos["deletePhoto" + i].checked = false;
          }
        }
        return false;

      }
      return true;
    }
  }
}

[Fotiman]

Forgot one thing:

function verify_photos() {
  for (h = 1; h <= 10; h++) {
    if (photos["deletePhoto" + h] != null &&
      photos["deletePhoto" + h].checked) {
      var answer = confirm("Are you sure you would like to delete the checked photo(s)?");
      if (!answer) {
        for (i = 1; i <= 10; i++) {
          if (photos["deletePhoto" + i] != null) {
            photos["deletePhoto" + i].checked = false;
          }
        }
        return false;

      }
      return true;
    }
  }
  return true;
}

[lucy24]

for (h = 1; h <= 10; h++)
for (i = 1; i <= 10; i++)

I don't understand the inner loop. That is, I don't understand why it's inner rather than subsequent. ("If user doesn't say Yes, uncheck everything.")

Come to think of it, I don't understand why this function doesn't result in up to ten separate alerts. The "photo(s)" wording implies that the alert only comes up once, but the structure points to separate alerts.

for (1 to 10 loop)
if box is checked
flag=true
break

and then

if flag
put up alert box

if response is "yes I really mean it"
delete checked photos
else
uncheck everything

[Fotiman]

The outer loop is looking for any checkbox that is checked. If it doesn't find any, it will never prompt for confirmation, and will just return true. If it does find one (on the first one that it finds), it will prompt the user if they're sure. If the user picks yes, it will return true, thereby immediately killing the loop. If the user picks no, THEN it will go to the inner loop, which goes through the list of photos and unchecks every one of them, then returns false, which also immediately kills the loop.

[we5inelgr]

Thanks to all for the replies!

And Fotiman, many thanks to you for this suggestion in the if statements: "photos["deletePhoto" + h] != null &&" it now works as expected.

I really do appreciate your help.

Thanks.

[we5inelgr]

oh, and for combining the (answer) portion too. Great idea! Thanks!