Javascript use class instead of id

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>

Anoop · Accepted Answer · 2012-11-04 15:05:14Z

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;
    }
  }

edited Nov 4, 2012 at 15:05

answered Nov 4, 2012 at 14:51

Anoop

23.2k10 gold badges65 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

kingbt Over a year ago

Not a solution to use name. I use PHP that takes the name of input and if I add name to other inputs then I must modify the PHP code a lot. Thanks.

Anoop Over a year ago

You should't use same id for two or more element in same document.

Anoop Over a year ago

I modiefied your js code to use class. this should solve your problem.

jacek_podwysocki · Accepted Answer · 2012-11-04 14:52:18Z

0

Use:

document.getElementsByClassName('filterCat')

answered Nov 4, 2012 at 14:52

jacek_podwysocki

80711 silver badges30 bronze badges

4 Comments

jacek_podwysocki Over a year ago

Create a new variable like so var filterCat = document.getElementsByClassName('filterCat'); and then use it whenever you would be calling the input form of "filterCat" id

Ry- Over a year ago

By the way, this isn't compatible with IE8. If you're lucky, though, you don't have to support it :)

jacek_podwysocki Over a year ago

I would suggest you to use jQuery cause minitech has pointed out important thing. It is easier to do validation and more likely to work in IE and other browsers if you use jQuery. Plus a good tutorial for getting id of an element in IE when using forms here impressivewebs.com/…

kingbt Over a year ago

@jacek_podwysocki Thanks. I will try t use jQuery but for now it is good so.

Collectives™ on Stack Overflow

Javascript use class instead of id

2 Answers 2

3 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related