How can I get form data from a div tag by using its class?

Question

I have code something like:

 var iconContainer = document.getElementById('iconContainer'); var icon = iconContainer.getElementsByClassName("item"); for (var i = 0; i < icon.length; i++) { icon[i].addEventListener("click", function() { var current = document.getElementsByClassName("active"); current[0].className = current[0].className.replace(" active", ""); this.className += " active"; }); }

 <form> <header> <div class="icon-line" id="iconContainer"> <div class="item active" id=""> <div class="group-icon"> <i class="fas fa-hdd"></i> </div> <span>SSD</span> </div> <div class="item" id=""> <div class="group-icon"> <i class="fas fa-server"></i> </div> <span>EKRAN KARTI</span> </div> <div class="item" id=""> <div class="group-icon"> <i class="fas fa-microchip"></i> </div> <span>İŞLEMCİ</span> </div> <div class="item" id=""> <div class="group-icon"> <i class="fas fa-memory"></i> </div> <span>RAM</span> </div> </div> </header> </form>

Also I have a selection.js that changes selected item's class from class="item" to class="item-active"

How can controll the selected item by using it's data?

I want to search in my data by using selected item. For exapmle, you selected SSD, so that, I will search on my SSD.json file or you selected RAM, I will search on my ram.js

How can do this?

Note: I'm using Node.js on server side.

Answer 1

Ok, firstly you have a for loop that change item's class to "active" one, we will continue adding code there.

var iconContainer = document.getElementById('iconContainer');
var icon = iconContainer.getElementsByClassName("item");

for (var i = 0; i < icon.length; i++) {
  icon[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";
    // ADD CODE HERE

  });
}

You'll have to do 2 things: get the selected item's value and send it to server by making a searh request with the value as params.

Get the selected item's value by getting the 's innerText:

...
// ADD CODE HERE
var value = this.getElementsByTagName("span")[0].innerText;

And make a get request with the value with fetch API (or any libs that support make xhr request):

...
// ADD CODE HERE
var value = this.getElementsByTagName("span")[0].innerText;
fetch(`URL_TO_SERVER/?params=${value}`)
   .then(res => {
        // do what you want with search result
   }

The rest is your server's work to handle the request, take params, search on respective file and return the search result to client.

That's all.

In better way, instead of using value from innerText as param, you should use data-attribute for better request. You can read here: https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes