Social development practitioner. Trying to understand our world.
function mySelect(options, name, defaultValue = null) {
const elements = Array.from(Object.entries(options), ([value, label]) => {
const attrSelected = value === defaultValue ? 'selected' : null;
return html`<option value=${value} ${attrSelected}>${label}`;
});
return html`<div>
<div class="fl w-two-thirds pa1">
<select name=${name}>${elements}
</div>`;
}
viewof form3 = {
// 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`<label class="b" for=${id}>${DOM.text(label)}:`;
return html`
<div>
<div class="fl w-third pa1">${l}</div>
<div class="fl w-two-thirds pa1">
${input}
${input.title ? html`<span class="db f6 i">${DOM.text(input.title)}` : ''}
</div>
`;
};
// 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`<div>
<form class=dt>
${row('Surveyor ID', inputs.surveyor_ID = html`<input
placeholder="First Name + Last Name"
required
title="Please enter the primary surveyor's full name.">`)}
${row('My Selection',
mySelect({
value1: "Label for value 1",
value2: "Label for value 2"
}, "the_element_name", "value2"))}
<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;
}
output = form3
form2
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
