DOM problem in javascript function.

[nelsonm]

Hi all,

This function was functioning when the "cb" argument referenced an input tag id="cb". However after submitting the page to W3 for validation, i had to convert the id="cb" to class="cb". Now the "document.volunteerform.elements["cb"]" statement does not work.

I'm not well versed on dom and could use a little help reworking that dom statement. The code follows...

function resetForm(aomPreset, milPreset, posPreset){
var checkbox = document.volunteerform.elements["cb"];


if(window.confirm("Reset form input fields?")){
for(i=0; i < checkbox.length; i++){
if(aomPreset.charAt(i) == "1" ){checkbox[i].checked = true;}else{checkbox[i].checked = false;}
}

document.volunteerform.distance.value  = milPreset;
document.volunteerform.postalcode.value = posPreset;

return true;
}else{
return false;
}
}

[Fotiman]

Why did you need to remove the id?

[nelsonm]

I submitted the page to WC3 for markup validation. technically, id="names" are supposed to be unique or only used once where a class="names" can be used multiple times.

I am using "cb" as an array name in input tags for related input checkboxes as follows...

               <ul>
                <li><input name="aom[7]" class="cb" type="checkbox" value="1"<?php if ($aom[7] == "1") echo ' checked="checked"'; ?>/>Instruct the ignorant</li>
                <li><input name="aom[8]" class="cb" type="checkbox" value="1"<?php if ($aom[8] == "1") echo ' checked="checked"'; ?>/>Counsel the doubtful</li>
                <li><input name="aom[9]" class="cb" type="checkbox" value="1"<?php if ($aom[9] == "1") echo ' checked="checked"'; ?>/>Admonish sinners</li>
                <li><input name="aom[10]" class="cb" type="checkbox" value="1"<?php if ($aom[10] == "1") echo ' checked="checked"'; ?>/>Bear wrongs patiently</li>
                <li><input name="aom[11]" class="cb" type="checkbox" value="1"<?php if ($aom[11] == "1") echo ' checked="checked"'; ?>/>Forgive offenses willingly</li>
                <li><input name="aom[12]" class="cb" type="checkbox" value="1"<?php if ($aom[12] == "1") echo ' checked="checked"'; ?>/>Comfort the afflicted</li>
                <li><input name="aom[13]" class="cb" type="checkbox" value="1"<?php if ($aom[13] == "1") echo ' checked="checked"'; ?>/>Pray for the living and the dead</li>
               </ul>

[Fotiman]

Ok, so you're trying to get all of the checkbox items. Try this:

function resetForm(aomPreset, milPreset, posPreset){
  var i,
    checkbox = document.volunteerform.getElementsByTagName("input");
  if (window.confirm("Reset form input fields?")) {
    for(i = 0; i < checkbox.length; i++) {
      if (checkbox[i].type == "checkbox" && checkbox[i].className == "cb") {
        checkbox[i].checked = (aomPresent.charAt(i) == "1");
      }
    }
    document.volunteerform.distance.value = milPreset;
    document.volunteerform.postalcode.value = posPreset;
    return true;
  } else {
    return false;
  }
}

[Fotiman]

Note, my example will match all checkbox items that have class "cb", which might be slightly redundant (depending on how your form is managed). You may be able to remove one of these checks (for example, if there no checkboxes without the "cb" class, you could remove the check for the cb class).

[nelsonm]

Thanks anyway, but I just decided to do it the jquery way. It simpler and works for both IE and FireFox...

function resetForm(aomPreset, milPreset, posPreset){
var checkbox = $(".cb");

if(window.confirm("Reset form input fields?")){
for(i=0; i < checkbox.length; i++){
if(aomPreset.charAt(i) == "1" ){checkbox[i].checked = true;}else{checkbox[i].checked = false;}
}

document.volunteerform.distance.value = milPreset;
document.volunteerform.postalcode.value = posPreset;

return true;
}else{
return false;
}
}