31:[] 2f:{"title":"Form Input With Submit","cells":[{"id":0,"value":"md`# Form Input With Submit\n\nThis notebook defines a \\`formWithSubmit\\` function which makes it easier to use complex forms together with [Observable views](/@mbostock/introduction-to-views).\n\nThis fork changes [@mbostock/form-input](https://observablehq.com/@mbostock/form-input)'s version to **not** output the values until the form is submitted.\n\nTo use it in your notebook:\n\n\\`\\`\\`js\nimport {formWithSumbit} from \"@forresto/form-input-with-submit\"\n\\`\\`\\`\n\nPass the *formWithSumbit* function a form element, and you’re off to the races! 🐎`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"viewof object = formWithSubmit(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!\n\nUntil the form is submitted, \\`object\\` will be unresolved, and this won't draw:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":116,"value":"html`\n ${Object.assign(\n svg``,\n {\n textContent: object.message + \" \" + object.number\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 formWithSubmit(form) {\n const container = html`

${form}`;\n form.addEventListener(\"submit\", event => {\n event.preventDefault();\n container.value = formValue(form);\n container.dispatchEvent(new CustomEvent(\"input\"));\n });\n form.addEventListener(\"input\", event => {\n event.preventDefault();\n // Need this, because otherwise the viewof Generator catches bubbling input events\n event.stopPropagation();\n });\n return container;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":207,"value":"formWithSumbit = formWithSubmit","pinned":true,"hidden":false,"mode":"ojs"},{"id":161,"value":"import { formValue } from '@mbostock/form-input'","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}