如何使用 vanilla JavaScript 从动态创建的输入字段中获取数据？答案

【问题标题】：How can I get data from dynamically created input field using vanilla JavaScript?如何使用 vanilla JavaScript 从动态创建的输入字段中获取数据？
【发布时间】：2022-01-31 04:02:40
【问题描述】：

HTML: 在 'education-field' div 内，将通过单击添加更多按钮创建动态输入字段。创建输入字段后，我想获取该字段的数据。这实际上是为表单验证完成的。用户可以添加更多字段来添加他们的教育程度。但是我无法跟踪输入字段的数据。

<form>
  <div class="education-field">
   <!-- input field -->
  </div>
  <button style=" background-color: blueviolet; border-color: blueviolet;" class="btn btn-primary btn-sm add-button"> Add more </button> 
</form

javascript：此代码用于在教育字段中添加动态输入字段。

const addField = document.querySelector('.add-button');

const educationField = document.querySelector('.education-field');


addField.addEventListener('click', () => {

  const buttonDiv = document.querySelector('.add-more-field');

  const div = document.createElement('div')'

  div.classList.add('education-input-field', 'row', 'mb-2');

  div.innerHTML = `<div class="col-md-5">

                      <input
                        type="text"
                        class="form-control degree-name"
                        placeholder="Degree name "
                      />

                      </div>

                     `;


  educationField.insertBefore(div, buttonDiv);
})

【问题讨论】：

如果上述方法有效，您尝试获取字段数据的代码在哪里？什么实际上不起作用？
动态创建输入字段时，我无法从该字段获取数据。从动态创建的输入字段中获取数据的过程是什么？

标签： javascript html validation bootstrap-5

【解决方案1】：

要获取所有字段值，请使用 querySeletorAll 并将每个输入元素的值映射到一个数组中

// Utility functions:

const EL = (sel, par) => (par||document).querySelector(sel);
const ELS = (sel, par) => (par||document).querySelectorAll(sel);
const ELNew = (tag, prop) => Object.assign(document.createElement(tag), prop)

// App: Form: Add education:

const EL_add = EL(".add-button");
const EL_get = EL(".get-button");
const EL_fields = EL(".education-fields");

const addField = (name) => {
  const EL_field = ELNew("div", {
    className: "education-input-field row mb-2",
    innerHTML: `<div class="col-md-5">
      <input value="${name || ""}" type="text" class="form-control degree-name" placeholder="Degree name"/>
    </div>`
  });
  EL_fields.append(EL_field);
}

const getFieldsVaules = () => {
  return [...ELS(".degree-name", EL_fields)].map(el => el.value);
};

// Events:

EL_add.addEventListener("click", () => {
  // Add a new field to DOM
  addField();
});

EL_get.addEventListener("click", () => {
  const fieldsValues = getFieldsVaules(); // Get all fields values into array
  console.log(fieldsValues);
  // TODO: do something with it
});

// Example: prepopulate with existing fields:

const existingFields = ["JavaScript Course", "HTML course"];
existingFields.forEach(addField);  // That simple!

.btn.btn-primary {
  background-color: blueviolet;
  border-color: blueviolet;
  color: #fff;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<div class="education-fields"></div>
<button type="button" class="btn btn-primary add-button">Add more</button>
<button type="button" class="btn btn-secondary get-button">Get Current values</button>

【讨论】：