Estoy tratando de crear un formulario donde un usuario pueda completar su nombre completo en las entradas. Creé un formulario simple, pero el formulario muestra solo la entrada del nombre. Estoy pensando en el método forEach para cumplir con la tarea, pero no entiendo correctamente cómo hacerlo. ¿O debería buscar de otra manera? También he pensado en crear elementos de 'segundo nombre' y 'tercer nombre', pero de esta manera no me queda bien. Gracias
const nameInput = document.querySelector('.name'); const button = document.querySelector('.button') const lists = document.querySelector('.lists') function addName(evt) { evt.preventDefault(); const listItem = document.createElement('li'); listItem.textContent = nameInput.value; lists.appendChild(listItem); nameInput.value = ''; } button.addEventListener('click', addName); <form class="form"> <input type="text" class="name" placeholder="Имя"> <input type="text" class="name" placeholder="Фамилия"> <input type="text" class="name" placeholder="Отчество"> <button type="submit" class="button">ОК</button> </form> <div class="block"> <ul class="lists"></ul> </div>Si desea tomar los nombres del formulario y crear un elemento de lista cada vez que se presiona el botón, puede usar querySelectorAll para seleccionar todas las entradas de nombre y recorrerlas para obtener los nombres.
const nameInputs = document.querySelectorAll('.name'); const button = document.querySelector('.button') const lists = document.querySelector('.lists') function addName(evt) { evt.preventDefault(); const listItem = document.createElement('li'); var names = [] nameInputs.forEach(i =>{ names.push(i.value); i.value = ''; }); listItem.textContent = names.join(' '); lists.appendChild(listItem); } button.addEventListener('click', addName); <form class="form"> <input type="text" class="name" placeholder="Имя"> <input type="text" class="name" placeholder="Фамилия"> <input type="text" class="name" placeholder="Отчество"> <button type="submit" class="button">ОК</button> </form> <div class="block"> <ul class="lists"></ul> </div>Es una buena práctica usar siempre el atributo de name para los elementos de su formulario. Para que puedas identificarlos.
Simplemente agregue un name a sus entradas y proporcione una id a su formulario.
const nameInput = document.querySelector('.name'); const button = document.querySelector('.button') const lists = document.querySelector('.lists') function addName(evt) { evt.preventDefault(); const contact_form = document.getElementById("contact_form"); Array.from(contact_form.elements).forEach((input) => { if(input.type === 'text') { const listItem = document.createElement('li'); listItem.textContent = `${input.name} = ${input.value}`; lists.appendChild(listItem); input.value = ''; } }); } button.addEventListener('click', addName); <form id="contact_form" class="form"> <input type="text" name="firstName" class="name" placeholder="Имя"> <input type="text" name="lastName" class="name" placeholder="Фамилия"> <input type="text" name="email" class="name" placeholder="Отчество"> <button type="submit" class="button">ОК</button> </form> <div class="block"> <ul class="lists"></ul> </div>