How to get read from multiple inputs with same class name into array

March 16, 2023

I have built a page similar to this snippet.

const applyButton = document.querySelector(".filter-button");

applyButton.addEventListener("click", dummyFetchFunction);

function dummyFetchFunction(){
  //here I want to read the input into an array.
  
  
  //Then I will do the fetch passing this array as parameter.
}

.filter-button{
    margin: 5px;
    margin-top: auto;
    border-radius: 5px; 
}

.filter-group{
    margin: 10px;
    font-size: 13px;
}

.filter-group__title {
    margin-bottom: 5px;
}

.filter-group__input {
    display: flex;
}

.filter-group__input input {
    width: 1%;
    flex: 1 1 auto;
}

.filter-group__input span {
    margin: 0 5px;
    font-size: 1rem;
}

<div class="filter-group">
    <div class="filter-group__title">
        Publish year
    </div>
    <div class="filter-group__input">
        <input type="text"  placeholder="from" />
        <span> - </span>
        <input type="text"  placeholder="to" />
    </div>
</div>
<div class="filter-group">
    <div class="filter-group__title">
        Pages amount
    </div>
    <div class="filter-group__input">
        <input type="text"  placeholder="from" />
        <span> - </span>
        <input type="text"  placeholder="to" />
    </div>
</div>

<button class="filter-button">Apply filters</button>

My problem is I that I would like know is there any way to read data from multiple inputs into array Because right now the only thing that comes into my mind is to assign each input an Id and manually match push data into array.

>Solution :

You can give each input a name, then simply loop through the inputs in the form and add them to the object with their values. You don’t need to manually add them

const applyButton = document.querySelector(".filter-button");
const frm = document.querySelector("form");

applyButton.addEventListener("click", dummyFetchFunction);

function dummyFetchFunction(){
  
  let inputs = frm.querySelectorAll("input")
  let dict = {}
  inputs.forEach((e) => {
    dict[e.name] = e.value;
  });
  
  console.log(dict)
  
  
  //Then I will do the fetch passing this dictionary as parameter.
}

.filter-button{
    margin: 5px;
    margin-top: auto;
    border-radius: 5px; 
}

.filter-group{
    margin: 10px;
    font-size: 13px;
}

.filter-group__title {
    margin-bottom: 5px;
}

.filter-group__input {
    display: flex;
}

.filter-group__input input {
    width: 1%;
    flex: 1 1 auto;
}

.filter-group__input span {
    margin: 0 5px;
    font-size: 1rem;
}

<form><div class="filter-group">
    <div class="filter-group__title">
        Publish year
    </div>
    <div class="filter-group__input">
        <input type="text" name="yearFrom" placeholder="from" />
        <span> - </span>
        <input type="text"  name="yearTo" placeholder="to" />
    </div>
</div>
<div class="filter-group">
    <div class="filter-group__title">
        Pages amount
    </div>
    <div class="filter-group__input">
        <input type="text"  name="pagesFrom" placeholder="from" />
        <span> - </span>
        <input type="text"  name="pagesTo" placeholder="to" />
    </div>
</div>

<button type="button" class="filter-button">Apply filters</button>
</form>