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