30:[] 2e:{"title":"Form Input","cells":[{"id":0,"value":"md`# Form Input\n\n

***Update Jan. 2022:*** *Observable now supports [**form inputs**](/@observablehq/input-form)! This notebook will remain for history, but please upgrade to [Observable Inputs](/@observablehq/inputs).*

\n\nThis notebook defines a *form* function which makes it easier to use complex forms together with [Observable views](/@mbostock/introduction-to-views). To use it in your notebook:\n\n\\`\\`\\`js\nimport {form} from \"@mbostock/form-input\"\n\\`\\`\\`\n\nPass the *form* function a form element, and you’re off to the races! 🐎`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"viewof object = form(html``)","pinned":true,"hidden":false,"mode":"ojs"},{"id":19,"value":"object","pinned":true,"hidden":false,"mode":"ojs"},{"id":135,"value":"md`Now you have a reactive reference to resulting object!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":116,"value":"html`\n ${Object.assign(\n svg``,\n {\n textContent: `${object.message} ${object.emojis.join(\" \")}`\n }\n )}\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":98,"value":"md`---\n\n## Implementation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"function form(form) {\n const container = html`

${form}`;\n form.addEventListener(\"submit\", event => event.preventDefault());\n form.addEventListener(\"change\", () => container.dispatchEvent(new CustomEvent(\"input\")));\n form.addEventListener(\"input\", () => container.value = formValue(form));\n container.value = formValue(form);\n return container\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":24,"value":"function formValue(form) {\n const object = {};\n for (const input of form.elements) {\n if (input.disabled || !input.hasAttribute(\"name\")) continue;\n let value = input.value;\n switch (input.type) {\n case \"range\":\n case \"number\": {\n value = input.valueAsNumber;\n break;\n }\n case \"date\": {\n value = input.valueAsDate;\n break;\n }\n case \"radio\": {\n if (!input.checked) continue;\n break;\n }\n case \"checkbox\": {\n if (input.checked) value = true;\n else if (input.name in object) continue;\n else value = false;\n break;\n }\n case \"file\": {\n value = input.multiple ? input.files : input.files[0];\n break;\n }\n case \"select-multiple\": {\n value = Array.from(input.selectedOptions, option => option.value);\n break;\n }\n }\n object[input.name] = value;\n }\n return object;\n}","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}