Widget State with Events Example

Open get-data-from-a-widget in Script Kit

// Name: Get Data from a Widget
import "@johnlindquist/kit"
let state = {
firstName: "",
lastName: "",
fullName: "",
}
let w = await widget(
`
<div class="flex flex-col justify-center items-center text-white">
<form class="flex flex-col">
<input id="first" type="text" class="text-black" placeholder="First Name" autofocus>
<input id="last" type="text" class="text-black" placeholder="Last Name">
<button id="submit" type="submit">Submit</button>
</form>
<div class="flex flex-col">
<div>{{firstName}} {{lastName}}</div>
<div>{{fullName}}</div>
</div>
</div>
`,
{
height: 360,
width: 360,
state,
}
)
w.onInput(event => {
if (event.targetId === "first") {
state.firstName = event.value
}
if (event.targetId === "last") {
state.lastName = event.value
}
w.setState(state)
})
w.onClick(event => {
if (event.targetId === "submit") {
state.fullName = `Hello, ${state.firstName} ${state.lastName}`
}
w.setState(state)
})