Formular
Opsamling (output)
First name:
Last name:
Email:
Password:
Terms accepted:
Brug FormData-API’en til at samle værdierne fra formularen, når den bliver submit’et, og vis dem i output-sektionen.
<main>
...
<form aria-label="Sign up form">
<div class="form-group">
<label for="first_name">First name</label>
<input aria-describedby="first_name-error" type="text" id="first_name" name="first_name" required />
<p class="error-message" id="first_name-error">Please enter a value</p>
</div>
<div class="form-group">
<label for="last_name">Last name</label>
<input aria-describedby="last_name-error" type="text" id="last_name" name="last_name" required />
<p class="error-message" id="last_name-error">Please enter a value</p>
</div>
<div class="form-group">
<label for="email">Email</label>
<input aria-describedby="email-error" type="email" id="email" name="email" required />
<p class="error-message" id="email-error">Please enter a value</p>
</div>
<div class="form-group">
<label for="password">Password</label>
<p id="password-instruction">Password must be at least 8 characters</p>
<input aria-describedby="password-instruction password-error" type="password" id="password" name="password" minlength="8" required />
<p class="error-message" id="password-error">Please enter a value</p>
</div>
<div class="form-group">
<label for="terms">
<input aria-describedby="accept_terms-error" type="checkbox" id="terms" name="accept_terms" value="yes" required />
Accept terms
</label>
<p class="error-message" id="accept_terms-error">Please tick the box</p>
</div>
<button>Sign up</button>
</form>
...
...
<div>
<p>First name: <span id="first_output"></span></p>
<p>Last name: <span id="last_output"></span></p>
<p>Email: <span id="email_output"></span></p>
<p>Password: <span id="pass_output"></span></p>
<p>Terms accepted: <span id="terms_output"></span></p>
</div>
...
</main>
const outputFirst = document.querySelector("#first_output");
const outputLast = document.querySelector("#last_output");
const outputEmail = document.querySelector("#email_output");
const outputPass = document.querySelector("#pass_output");
const outputTerms = document.querySelector("#terms_output");
function handleSubmit(event) {
event.preventDefault();
// 1. saml værdierne fra formularen
// 2. vis værdierne i de rigtige output-felter
form.reset();
}
form.addEventListener("submit", handleSubmit); Hints
function handleSubmit(event) {
event.preventDefault();
const formData = new FormData(form);
outputFirst.textContent = formData.get("first_name");
// ... gentag for de andre felter
form.reset();
}