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)
})