Formular
Opsamling (output)
Full name:
Email:
Languages:
Saml checkbox-værdierne og vis dem i output-sektionen.
<main>
...
<form aria-label="EK signup form">
...
<div class="form-group">
<fieldset>
<legend>Favourite Languages</legend>
<div>
<label for="html">
<input type="checkbox" value="HTML" name="language" id="html" aria-describedby="lang-msg">
HTML
</label>
<label for="css">
<input type="checkbox" value="CSS" name="language" id="css" aria-describedby="lang-msg">
CSS
</label>
<label for="javascript">
<input type="checkbox" value="JavaScript" name="language" id="javascript" aria-describedby="lang-msg">
JavaScript
</label>
</div>
</fieldset>
<p id="lang-msg" class="error-message">Please select a language</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>Languages: <span id="langs_output"></span></p>
</div>
...
</main>
const outputName = document.querySelector("#name_output");
const outputEmail = document.querySelector("#email_output");
const outputLangs = document.querySelector("#langs_output");
function handleSubmit(event) {
event.preventDefault();
const formData = new FormData(form);
outputName.textContent = formData.get("full_name");
outputEmail.textContent = formData.get("email");
// 1. saml checkbox-værdierne 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 langs = formData.getAll("language").join(", ");
outputLangs.textContent = langs;
form.reset();
}