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
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.