2b:null 2c:["$","title",null,{"children":"Submittable form | jleedev | Observable"}] 31:T571,# Submittable form Observable inputs are fantastic, but sometimes you want to only propagate the changes deliberately. Also, each input comes wrapped in a `

`, which impedes composability. All you need to do is: - Stop the propagation of the `input` events from the form controls. (So you can type without Observable noticing.) - Include a submit button somewhere in the form. (Otherwise you can’t submit, even by pressing enter.) - e.g. `` - Return any sort of `EventTarget` that has a `value` attribute and fires `input` events so that Observable can see it. - Such as the form itself. With a `value` attribute. - But that’s not a good idea if we want to allow `` elements with arbitrary names, so we’ll wrap it in a `

`. - Using the `formdata` event will include the name/value of the submit button which was clicked. Manually constructing a `FormData` in response to the `submit` event will not include the button. Then the `value` of our view will be the `FormData` that comes out, which can be used directly or converted to an `Array`, `URLSearchParams`, or `multipart/form-data` as needed. One caveat, if the form contains multiple submit buttons, pressing enter on a non-button input will always activate the first one. To encode multiple alternative actions, use multiple forms and then listen on all of them.32:[] 2f:{"id":"79f4e482e89fe8d3","slug":null,"title":"Submittable form","thumbnail":"af2f558969623cb54efec35b5795580c0fe28c274dadf7ec50cb09927d6930e5","access_level":"public","create_time":"$D2022-12-15T17:33:41.004Z","update_time":"$D2023-02-13T15:11:54.758Z","view_time":null,"first_public_time":"$D2022-12-15T17:33:41.004Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"93f88a392b09c0b2","login":"jleedev","name":"","avatar_url":"https://avatars-next.observableusercontent.com/68aa27cdda263ac7113092ff8aacbd9058bedc56790cabb734e9c32a2246dff1","tier":"starter_2024"},"version":1734,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"b5e0663ad99246fa","login":"jleedev","name":"","avatar_url":"https://avatars-next.observableusercontent.com/68aa27cdda263ac7113092ff8aacbd9058bedc56790cabb734e9c32a2246dff1","tier":null}],"members":[{"type":"individual","id":"b5e0663ad99246fa","login":"jleedev","name":"","avatar_url":"https://avatars-next.observableusercontent.com/68aa27cdda263ac7113092ff8aacbd9058bedc56790cabb734e9c32a2246dff1","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"353cc4a85914b6bd","slug":"utility","title":"utility","owner":{"id":"93f88a392b09c0b2","login":"jleedev","name":""}},"type":"notebook","body":{"title":"Submittable form","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1608,"value":"submittableForm = (...args) => {\n // We want to allow using a regular form with any real named inputs inside.\n // There’s no way to prevent the HTMLFormElement from exposing those as named properties.\n // Wrap it in a div to hide that.\n // Carefully access named properties that we need to access on the form.\n const inner = htl.html.fragment(...args);\n const form = htl.html`${inner}`;\n const wrapper = htl.html`

${form}`;\n let value = null;\n requestIdleCallback(() => wrapper.dispatchEvent(new InputEvent(\"input\")));\n Object.defineProperty(wrapper, \"value\", {\n enumerable: true,\n configurable: true,\n get: () => value\n });\n const addEventListener = Reflect.get(\n HTMLFormElement.prototype,\n \"addEventListener\",\n form\n ).bind(form);\n addEventListener(\"input\", (e) => e.stopPropagation());\n addEventListener(\"formdata\", (e) => {\n value = e.formData;\n wrapper.dispatchEvent(new InputEvent(\"input\"));\n });\n return wrapper;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1732,"value":"coalesce = (...targets) => {\n const result = new EventTarget();\n result.value = _.find(targets, \"value\")?.value ?? null;\n const callback = (e) => {\n result.value = e.target.value;\n result.dispatchEvent(new InputEvent(\"input\"));\n };\n targets.forEach((t) => t.addEventListener(\"input\", callback));\n requestIdleCallback(() => result.dispatchEvent(new InputEvent(\"input\")));\n return Generators.disposable(result, () =>\n targets.forEach((t) => t.removeEventListener(\"input\", callback))\n );\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":350,"value":"new Map(example)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":376,"value":"new URLSearchParams(example).toString()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"viewof example = submittableForm`\n

Name:

Lunch:

\n \n `","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1677,"value":"[await new Response(form2).text()]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1669,"value":"new URLSearchParams(form2).toString()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1543,"value":"form2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1710,"value":"Inputs.table(form2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1376,"value":"viewof form2 = weirdForm()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1635,"value":"Array.from(form2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1236,"value":"weirdForm = () => {\n const names = [\n ...[\n \"key\",\n \"value\",\n \"then\",\n \"1\",\n \"addEventListener\",\n \"style\",\n \"__proto__\",\n \"replaceChildren\",\n \"constructor\"\n ],\n ...Reflect.ownKeys(HTMLFormElement.prototype).filter(\n (x) => typeof x === \"string\" && x !== \"constructor\"\n )\n ];\n return submittableForm`${names.map(check)}