2b:null 2c:["$","title",null,{"children":"Combined And Custom Forms | Fabian Iwand | Observable"}] 31:T61e,viewof form = { // Each of these is actually a

element. const inputs = { form_id: number({placeholder: "00", title: "Form Number", submit: false}), surveyor_ID: text({title: "Surveyor ID", placeholder: "First Name + Last Name", description: "Please enter the primary surveyor's full name."}), surveyor_ID2: text({title: "Surveyor ID (alternative)", placeholder: "First Name + Last Name", description: "Please enter the secondary surveyor's full name."}), camera_id: number({placeholder: "00", title: "Camera ID", submit: false}), gps_id: number({placeholder: "00", title: "GPS Record ID", submit: false}), interview_date: date({ title: "Interview Date", min: "2017-01-01", max: "2019-12-31", value: "2017-01-01", description: "Only dates between 2017 and 2019 calendar year are allowed" }), interview_time: time({ title: "Interview Time", min: "12:00:00", max: "23:59:59", value: "13:00:00", step: 1, description: "Only times after noon are allowed, and seconds are included" }), interview_notes: textarea({ title: "Interview Notes", placeholder: "Insert notes here...", spellcheck: true, width: "100%", rows: 4, submit: "Save" }), }; // Create a container and append all forms. const view = html`

${Object.values(inputs)}`; // Create a link to each form's value, maintaining the property names. view.value = linkViews({}, inputs); return view; }32:Ta61,viewof form2 = { // This function "themes" our form rows, using Tachyons classes. const row = (label, input) => { // Make sure the input has an ID so that the label can reference it. // That way inputs can be focused by clicking on their labels. const id = input.id || (input.id = DOM.uid('input').id); const l = html`${DOM.text(label)}:`; return html`

${l}

${input} ${input.title ? html`${DOM.text(input.title)}` : ''}

`; }; // We'll assign our inputs to this object on the fly. // Note that this will only work for elements that have a value property. const inputs = {}; const form = html`

${row('Form number', inputs.form_id = html``)} ${row('Surveyor ID', inputs.surveyor_ID = html``)} ${row('Surveyor ID2', inputs.surveyor_ID2 = html``)} ${row('Camera ID', inputs.camera_id = html``)} ${row('GPS Record ID', inputs.gps_id = html``)} ${row('Interview Date', inputs.interview_date = html``)} ${row('Interview Time', inputs.interview_time = html``)} ${row('Interview Notes', inputs.interview_notes = html`

`)}

<div class="pt2 bt1"><button>Submit
  `;
  // Link the values to a separate object.
  const values = linkViews({}, inputs);
  form.value = {...values};
  // Hide internal (bubbling) input events from Observable's runtime.
  form.oninput = e => e.target !== form && e.stopImmediatePropagation();
  // On submit update the view values and trigger an input event to notify the runtime.
  form.onsubmit = e => {
    e.preventDefault();
    Object.assign(form.value, values);
    form.dispatchEvent(new Event('input'));
  }
  
  return form;
}33:[]
2f:{"id":"29aebaa87b3d5a1b","slug":"combined-and-custom-forms","title":"Combined And Custom Forms","thumbnail":"2d3513372ddf1e5b7142f7f399d616cbf0343388eac0867dbb20badaae19c7f4","access_level":"public","create_time":"$D2019-06-28T08:37:50.264Z","update_time":"$D2019-08-16T13:13:18.180Z","view_time":null,"first_public_time":"$D2019-06-28T11:11:18.646Z","fork":false,"stars":17,"starred":false,"owner":{"type":"team","id":"898d35f8860c7f03","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":"starter_2024"},"version":161,"publish_version":161,"role":null,"authored":false,"authors":[{"type":"individual","id":"07362516b5994994","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":null}],"members":[{"type":"individual","id":"07362516b5994994","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":12,"collection":null,"type":"notebook","body":{"title":"Combined And Custom Forms","cells":[{"id":0,"value":"md`# Combined And Custom Forms\n\nThis notebook was created in response to another (still unpublished) notebook. It demonstrates how a single cell can expose multiple form values.\n\n---\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"md`This function will allow us to reroute values from multiple views through a single view.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"import {linkViews} from '852ff200776cb9f4'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"md`Adding Jeremy's Little Helpers™. Note that you can import multiple keys at once:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"import {number, text, date, time, textarea} from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"md`Here we recreate the \"Surveyor Identity\" form, but this time inside a single cell. To keep the example simple we'll ignore the missing spacing around each element:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"md`As you can see, the cell value contains all our form values:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"form","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"md`---\nBut we can go further! Let's create a multi-input form on the fly, this time *without* Jeremy Ashkenas' Inputs library. We'll also mark a few fields as required and only update the view value on form submission.\n\nThe [Tachyons](https://tachyons.io/docs/) CSS library (the same library used by Observable) will provide us with some shorthand styling classes. Because Tachyons resets and normalizes all styles we need to inject it as the first of all stylesheets:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"tachyons = {\n  const src = 'https://unpkg.com/tachyons@4.10.0/css/tachyons.min.css';\n  const n = html`<link rel=stylesheet href=\"${src}\">`;\n  const api = {\n    attach: () => document.querySelector('head').prepend(n),\n    detach: () => n.parentNode && n.parentNode.removeChild(n),\n  };\n  api.attach();\n  invalidation.then(api.detach);\n  return api;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"md`With the styling handled, we can finally focus on our form:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"md`And here are the values:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"form2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}}
30:"$2f:body"
</article></body></html>