formsquare
Version:
Serialize html5 forms the smart way
263 lines (199 loc) • 7.35 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>Formsquare examples</title>
<style>
.example output {
display: block;
font-family: monospace;
max-width: 100%;
overflow-x: auto;
white-space: pre;
}
</style>
</head>
<body>
<h1>Formsquare examples</h1>
<section id="readme-examples">
<h2>Readme examples</h2>
<div class="example" id="readme-example-basic">
<h3>Basic</h3>
<form>
<input name="foo" value="bar">
<input name="baz" value="quux" disabled>
</form>
<output></output>
<script type="module">
import formsquare from "/dist/module/formsquare.js";
const div = document.getElementById("readme-example-basic");
const form = div.querySelector("form");
const obj = formsquare.filter(el => !el.disabled).parse(form);
const output = div.querySelector("output");
output.textContent = JSON.stringify(obj);
</script>
</div>
<div class="example" id="readme-example-basic-nomodule">
<h3>Basic (no module)</h3>
<form>
<input name="foo" value="bar">
<input name="baz" value="quux" disabled>
</form>
<output></output>
<!-- See if the iife script works -->
<script src="/dist/iife/formsquare.js"></script>
<script>
{
const div = document.getElementById("readme-example-basic-nomodule");
const form = div.querySelector("form");
const obj = formsquare.filter(el => !el.disabled).parse(form);
const output = div.querySelector("output");
output.textContent = JSON.stringify(obj);
}
</script>
</div>
<div class="example" id="readme-example-filters">
<h3>Filters</h3>
<form>
<input value="foo">
<input value="bar" disabled>
</form>
<form>
<input value="foo" disabled>
<input value="bar">
</form>
<form>
<input value="foo" disabled>
<input value="bar" class="hidden">
<input value="baz">
</form>
<output></output>
<script type="module">
import formsquare from "/dist/module/formsquare.js";
const { parse } = formsquare.filter(el => !el.disabled);
const div = document.getElementById("readme-example-filters");
const forms = div.querySelectorAll("form");
const output = div.querySelector("output");
const parsed = [];
parsed.push(parse(forms[0]));
parsed.push(parse(forms[1]))
parsed.push(
formsquare
.filter(el => !el.disabled)
.filter(el => !el.classList.contains("hidden"))
.parse(forms[2]),
);
output.textContent = parsed.map(JSON.stringify).join("\n");
</script>
</div>
<div class="example" id="readme-example-empty">
<h3>Empty</h3>
<form></form>
<output></output>
<script type="module">
import formsquare from "/dist/module/formsquare.js";
const div = document.getElementById("readme-example-empty");
const form = div.querySelector("form");
const obj = formsquare.parse(form);
const output = div.querySelector("output");
output.textContent = JSON.stringify(obj);
</script>
</div>
<div class="example" id="readme-example-singleton">
<h3>Singleton</h3>
<form>
<input type="number" value="42">
</form>
<output></output>
<script type="module">
import formsquare from "/dist/module/formsquare.js";
const div = document.getElementById("readme-example-singleton");
const form = div.querySelector("form");
const output = div.querySelector("output");
const strings = [];
strings.push(JSON.stringify(formsquare.parse(form)));
form[0].type = "text";
strings.push(JSON.stringify(formsquare.parse(form)));
output.textContent = strings.join("\n");
</script>
</div>
<div class="example" id="readme-example-checkboxes">
<h3>Checkboxes</h3>
<form>
<input type="checkbox" name="[]">
<input type="checkbox" name="[]" checked>
</form>
<output></output>
<script type="module">
import formsquare from "/dist/module/formsquare.js";
const div = document.getElementById("readme-example-checkboxes");
const form = div.querySelector("form");
const output = div.querySelector("output");
const strings = [];
strings.push(JSON.stringify(formsquare.parse(form)));
form[0].value = "false";
form[1].value = "on"
strings.push(JSON.stringify(formsquare.parse(form)));
output.textContent = strings.join("\n");
</script>
</div>
<div class="example" id="readme-example-week">
<h3>Week</h3>
<form>
<input type="week" value="2017-W14">
</form>
<output></output>
<script type="module">
import formsquare from "/dist/module/formsquare.js";
const div = document.getElementById("readme-example-week");
const form = div.querySelector("form");
const output = div.querySelector("output");
const string = JSON.stringify(formsquare.parse(form));
output.textContent = string;
</script>
</div>
<div class="example" id="readme-example-files">
<h3>Files</h3>
<form>
<input type="file" multiple>
</form>
<output></output>
<script type="module">
import formsquare from "/dist/module/formsquare.js";
const div = document.getElementById("readme-example-files");
const form = div.querySelector("form");
const output = div.querySelector("output");
form.addEventListener("input", event => {
formsquare
.parse(form)
.then((data) => {
output.textContent = JSON.stringify(data);
});
});
</script>
</div>
<div class="example" id="readme-example-form-collection">
<h3>Collections of forms</h3>
<form>
<input type="number" name="foo" value="2">
<input type="number" name="bar" value="5">
</form>
<form>
<input type="number" name="foo" value="42">
</form>
<output></output>
<script type="module">
import formsquare from "/dist/module/formsquare.js";
const { parse } = formsquare;
const div = document.getElementById("readme-example-form-collection");
const forms = div.querySelectorAll("form");
const output = div.querySelector("output");
const strings = [];
strings.push(JSON.stringify(parse(forms)));
strings.push(JSON.stringify([...forms].map(parse)));
output.textContent = strings.join("\n");
</script>
</div>
</section>
</body>
</html>