html 如何从具有相同类名的多个输入读取到数组中

axzmvihb 于 2023-03-21 发布在其他

关注(0)|答案(3)|浏览(137)

我已经建立了一个类似于这个片段的页面。

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>

我的问题是，我想知道，有没有办法从多个输入中读取数据到数组中，因为现在我唯一想到的是，给每个输入分配一个ID，然后手动匹配，将数据推入数组中。

Html

来源：https://stackoverflow.com/questions/75758142/how-to-get-read-from-multiple-inputs-with-same-class-name-into-array

3条答案

按热度按时间

eivgtgni1#

您可以为每个输入指定一个名称，然后简单地循环表单中的输入，并将它们和它们的值一起添加到对象中。

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>

赞(0）回复(0）举报 2023-03-21

ax6ht2ek2#

如果你不想给予每个字段一个名字并 Package 在一个表单中，那么我们可以使用一个map和object.fromEntries的Object赋值来简化点标记
这里我只假设title div中有键，而下一个div中有输入-代码不关心名称或ID

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>

赞(0）回复(0）举报 2023-03-21

jogvjijk3#

如果你想把值添加到一个数组中，我建议你使用form元素并监听submit事件。它将为你提供表单中的所有值，即使在开发过程中表单的布局和元素发生了变化。有关这种方法的更多信息，请参见this answer。如果你想要一个值数组，您只需修改for循环，将值（pair[1]）添加到数组中。

赞(0）回复(0）举报 2023-03-21