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

Question

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.

You can't really have a dictionary if you don't have a key to distinguish between values. You can just collect them into an array in this case. — Igor K., Mar 16 '23 at 15:22

score 0 · Accepted Answer · answered Mar 16 '23 at 15:32

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>

mplungjan · Answer 2 · 2023-03-16T16:09:58.950

If you do NOT want to give each field a name and wrap in a form then we can use a Object assign of a map and object.fromEntries to make it easier to do dot notation

Here I only assume there are keys in the title div and inputs in the next div - The code does not care about names or IDs

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

applyButton.addEventListener("click", dummyFetchFunction);

function dummyFetchFunction() {

  let dict = Object.assign({}, ...[...document.querySelectorAll(".filter-group__title")]
    .map(title => ({
      [title.textContent.trim().replace(/\s+/g, "_")]: 
      Object.fromEntries(
        [...title.nextElementSibling.querySelectorAll('input')]
        .map(inp => ([inp.placeholder, inp.value]))
      )
    })));
  console.log(dict)
}

.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>

score -1 · Answer 3 · answered Mar 16 '23 at 15:36

-1

If you would like to add the values to an array, I would recommend using a form element and listening to the submit event. It will provide you with all of the values from the form, even if in development the layout and elements of the form change. See this answer for more information on this approach. If you want an array of values, you would just modify the for loop to add the values (pair[1]) to an array.

answered Mar 16 '23 at 15:36

Violet Rosenzweig

486
3
10

The problem here is not the use of a form submit event but the loop needed to create the dict. There is not need for a submit here since the better solution is to ajax the dict if they want to save it – mplungjan Mar 16 '23 at 15:55
@mplungjan This doesn't feel relevant to my answer or the question; they didn't ask for a solution using a JS framework or a dependency, so ajax from jquery is off the table, and regardless ajax is using a loop internally somewhere to get these values – Violet Rosenzweig Mar 16 '23 at 16:00
Form submitting is not super relevant to `is there any way to read data from multiple inputs into array` unless you add a form and form data. The formdata would not read the title text so to use your suggestion, OP will have to wrap in a form, name all the fields etc. and that is what he asked how to not have to – mplungjan Mar 16 '23 at 16:07

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

3 Answers3