Question

I know that in jQuery you can use something like $(“.cssClass”) to get all elements with this class. However in plain html and javascript how do you group elements logically? For example:

<input id="fee1" data-id="1" data-group="Fees" type="text" value="$15.00"/>
<input id="fee2" data-id="2" data-group="Fees" type="text" value="$25.00"/>
<input id="fee3" data-id="3" data-group="Fees" type="text" value="$35.00"/>

I want to create a javascript function like this:

function GetByDataGroup(dataGroup){
/*  returns something like [[1,"$15.00"],[2,"$25.00"],[3,"$35.00"]]*/
}

EDIT : Due to some political reasons I cant use jQuery or any framework..i know it doesnt make sense 🙂

Answer 1

In the case of form elements like you’ve given in your example, the <fieldset> is the logical grouper.

Your form can (and some might go as far as to say ‘should’) have many fieldsets breaking up your form into logical areas.

Once you have the relevant form fields divided up into the logical <fieldset>‘s you can grab these using your Javascript either through a class/id on the fieldset, or some other selector (perhaps you’re grabbing all fieldsets on the page etc).

This makes it a lot easier if you’re using Plain Old Javascript rather than a framework to grab those items by some kind of id. Consider:

<fieldset id="contactDetails">
  <input ... />
  <input ... />
  <input ... />
</fieldset>

Using your POJ you can get all of these from:

var contactDetails = document.getElementById('contactDetails');