43:null 44:["$","title",null,{"children":"Form Input With Submit | Forrest O. | Observable"}] 4a:[] 48:{"id":"379024cb08238691","slug":"form-input-with-submit","title":"Form Input With Submit","thumbnail":"01b0d532e6649a1bf45e83114b7264ede1a811a65610b3e8b339142a8a3a368b","access_level":"public","create_time":"$D2019-10-31T15:00:57.438Z","update_time":"$D2021-12-10T21:34:20.570Z","view_time":null,"first_public_time":"$D2019-10-31T15:12:02.399Z","has_unpublished_edits":null,"fork":{"id":"8d271c22db968ab0","slug":"form-input","title":"Form Input","owner":{"id":"8c2e47252fd4995c","login":"mbostock","name":"Mike Bostock"}},"stars":6,"starred":false,"owner":{"type":"team","id":"f9abb147dc0e6dcd","login":"forresto","name":"Forrest O.","avatar_url":"https://avatars-next.observableusercontent.com/c22671040121cb9b9d22913e2eb0ffc4d65d3e535cda1133d6655f1d63b32e3f","tier":"starter_2024","bio":"open web tools for creativity and community","following":false},"version":208,"publish_version":208,"role":null,"authored":false,"authors":[{"type":"individual","id":"b16dd1586d4d1422","login":"forresto","name":"Forrest O.","avatar_url":"https://avatars-next.observableusercontent.com/c22671040121cb9b9d22913e2eb0ffc4d65d3e535cda1133d6655f1d63b32e3f","tier":null,"bio":"open web tools for creativity and community","following":false}],"members":[{"type":"individual","id":"b16dd1586d4d1422","login":"forresto","name":"Forrest O.","avatar_url":"https://avatars-next.observableusercontent.com/c22671040121cb9b9d22913e2eb0ffc4d65d3e535cda1133d6655f1d63b32e3f","tier":null,"role":"editor"}],"comments":[{"id":"bf3a307ee21db632","reply_to_id":null,"content":"There are still quite a few notebooks that import the old misspelled function name which was fixed in version 200. You may want to add an alias, so that these notebooks will no longer be broken:\n\n formWithSumbit = formWithSubmit","create_time":"$D2021-12-10T18:55:56.834Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"07362516b5994994","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":null}}],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":10,"collection":null,"type":"notebook","body":{"titling":"auto","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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"viewof object = formWithSubmit(html``)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"object","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"md`---\n\n## Implementation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"formWithSumbit = formWithSubmit","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"import { formValue } from '@mbostock/form-input'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4a","stdlib":"1"}} 49:"$48:body"