Formular
Opsamling (output)
Full name:
Email:
Department:
Message:
Saml værdierne fra select og textarea, og vis dem i output-sektionen sammen med navn og email.
<main>
...
<form aria-label="EK signup form">
...
<div class="form-group">
<label for="department">Department</label>
<select id="department" name="department" aria-describedby="department-error" required>
<option value="">Choose a department</option>
<option value="Frontend" selected>Frontend</option>
<option value="Backend">Backend</option>
<option value="Design">Design</option>
</select>
<p id="department-error" class="error-message">Please choose a department</p>
</div>
<div class="form-group">
<label for="message">Message</label>
<textarea id="message" name="message" aria-describedby="message-error" required>I would like to learn more about forms.</textarea>
<p id="message-error" class="error-message">Please enter a message</p>
</div>
<button>Sign up</button>
</form>
...
...
<div>
<p>Full name: <span id="name_output"></span></p>
<p>Email: <span id="email_output"></span></p>
<p>Department: <span id="department_output"></span></p>
<p>Message: <span id="message_output"></span></p>
</div>
...
</main>
const outputName = document.querySelector("#name_output");
const outputEmail = document.querySelector("#email_output");
const outputDepartment = document.querySelector("#department_output");
const outputMessage = document.querySelector("#message_output");
function handleSubmit(event) {
event.preventDefault();
const formData = new FormData(form);
outputName.textContent = formData.get("full_name");
outputEmail.textContent = formData.get("email");
// 1. saml værdierne fra select og textarea og vis dem i output-sektionen
form.reset();
}
form.addEventListener("submit", handleSubmit); Hints
function handleSubmit(event) {
event.preventDefault();
const formData = new FormData(form);
outputName.textContent = formData.get("full_name");
outputEmail.textContent = formData.get("email");
const department = formData.get("department");
outputDepartment.textContent = department;
outputMessage.textContent = formData.get("message");
form.reset();
}