Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<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
You can’t perform that action at this time.