HTML: dentro del campo de entrada div 'education-field' se creará dinámicamente haciendo clic en el botón Agregar más. Después de crear el campo de entrada, quiero obtener los datos de ese campo. Esto se hace realmente para la validación de formularios. Los usuarios pueden agregar más campos para agregar sus títulos educativos. Pero no puedo rastrear los datos del campo de entrada.
<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> </formjavascript: este código es para agregar un campo de entrada dinámico dentro del campo educativo.
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); })Para obtener todos los valores de sus campos, use querySeletorAll y asigne el valor de cada elemento de entrada a una matriz
// 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>