How can I get data from dynamically created input field using vanilla JavaScript?

Question

HTML: inside the 'education-field' div dynamically input field will be created by clicking add more button. After creating the input field I want to get the data of that field. This is actually done for form validation. Users can add more fields to add their educational degrees. But I can't track the data of the input field.

<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: This code is for adding a dynamic input field inside the education field.

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);
})

Answer 1

To get all your fields values, use querySeletorAll and map each Input Element's value into an array

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