Question

I have the code below and because it does not validate I want to delete the ids from the input boxes and make the Javascript use the class (class=”filterCat”) instead of the id. How do I do that?

Thanks.

<form id="adv_searchform" action="/" method="get" name="adv_searchform" onsubmit="return manageMultipleCategoriesSearch()">
  Search: 
  <input id="adv_s" class="input input_large" type="text" name="s" value="" />
  <h3>Category filter:</h3>
  <ul id="catSearchFilters">
<li><input type="checkbox" id="filterCat" class="filterCat" value="38">Announcements</li>
<li><input type="checkbox" id="filterCat" class="filterCat" value="39">Commentary</li>
<li><input type="checkbox" id="filterCat" class="filterCat" value="1">Uncategorized</li></ul>  <div class="clear"></div>
  <input type="hidden" name="cat" value="" />
  <input type="submit" id="searchsubmit" value="Search" />
</form>

<script>
function manageMultipleCategoriesSearch(){

  var selectedCats = "";
  var isFirst = true;

  for (i=0; i<document.adv_searchform.filterCat.length; i++){
    if (document.adv_searchform.filterCat[i].checked == true){

    if (!isFirst)
      selectedCats += ',';

      selectedCats += document.adv_searchform.filterCat[i].value;
      isFirst = false;
    }
  }

  document.adv_searchform.cat.value = selectedCats;

  return true;
}
</script>

Answer 1

Use name instead of id. and you should use different name for different checkboxes.

<li><input type="checkbox" name="filterCat1" class="filterCat" value="38">Announcements</li>
<li><input type="checkbox" name="filterCat2" class="filterCat" value="39">Commentary</li>
<li><input type="checkbox" name="filterCat3" class="filterCat" value="1">Uncategorized</li></ul>  <div class="clear"></div>

JS

var check = document.getElementsByClassName("filterCat");
for (i=0; i<check .length; i++){
    if (check[i].checked == true){

    if (!isFirst)
      selectedCats += ',';

      selectedCats += check [i].value;
      isFirst = false;
    }
  }