I'm trying to create a form where a user is able to fill his full name in inputs. I've created a simple form, but the form shows only first name input. I'm thinking about forEach method to fulfill the task, but don't correctly understand how to make it. Or should I look into another way? I've also thought about creating 'second-name' and 'third-name' elements but this way doesn't fit me. Thanks
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>If you want to take the names from the form and make a list item of them every time the button is pressed, you can use querySelectorAll to select all the name inputs and loop through them to get the names.
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>It is a good practice to always use name attribute for your form elements. So that you can identify them.
Simply add name to your inputs and give an id to your form.
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>