<style> | |
form div { | |
margin: 5px 0; | |
} | |
</style> | |
<form name="simple-form" id="simple-form"> | |
<div> | |
<label for="name-input">Name: </label> | |
<input required id="name-input" name="name" /> | |
</div> | |
<div> | |
<label for="email-input">Email: </label> | |
<input required type="email" id="email-input" name="email" /> | |
</div> | |
<button type="submit">Submit</button> | |
</form> | |
<h2>Form Output</h2> | |
<p id="form-output"></p> |
import template from "./demo.html"; | |
document.body.innerHTML = template; | |
(function () { | |
const output = document.getElementById("form-output"); | |
const form = document.getElementById("simple-form"); | |
form.onsubmit = () => false; | |
console.log("Ready"); | |
form.addEventListener("submit", () => { | |
const formData = new FormData(form); | |
let outputHTML = ""; | |
for (var pair of formData.entries()) { | |
outputHTML += `<div>${pair[0]}: ${pair[1]}</div>`; | |
} | |
output.innerHTML = outputHTML; | |
}); | |
})(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment