05-extraction-events.html

<!--
  Letting the agent fill in fields. On fields marked data-formguide="extract"
  the help panel gets a Done button. The visitor describes their answer in
  their own words, presses Done, and the agent writes the value into the
  field. The formguide:done and formguide:generated events tell your page
  when that happens.

  Replace YOUR_AGENT_ID (near the bottom) with your agent's id.
-->
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>Form guide: filling in fields</title>
  <style>
    .filled { outline: 2px solid #10b981; }
    button[aria-pressed="true"] { background: #1d4ed8; color: #fff; }
  </style>
</head>
<body>
  <h1>Filling in fields</h1>
  <p>Open a help panel and describe your answer in your own words ("I fix wiring on building sites", "I quit smoking two years ago", "born on the 3rd of May 1988"). Wait for the reply, then press <strong>Done</strong>. The agent writes the value into the field, and the events appear in the list at the bottom.</p>

  <form id="application" aria-label="Life cover application">
    <p>
      <label for="occupation">Your job</label><br>
      <input id="occupation" name="occupation" data-formguide="extract">
    </p>

    <p>
      <label for="smoker">Smoker status</label><br>
      <select id="smoker" name="smoker_status" data-formguide="extract">
        <option value="">Choose one</option>
        <option value="never">Never smoked</option>
        <option value="ex">Ex-smoker (stopped over 12 months ago)</option>
        <option value="current">Smoker or used nicotine in the last 12 months</option>
      </select>
    </p>

    <p>
      <label for="dob">Date of birth</label><br>
      <input id="dob" name="date_of_birth" type="date" data-formguide="extract">
    </p>

    <p>
      <label for="cover">Cover amount in pounds</label><br>
      <input id="cover" name="cover_amount" type="number" data-formguide="extract">
    </p>

    <p>
      <label><input id="joint" name="joint_policy" type="checkbox" data-formguide="extract"> Joint policy with a partner</label>
    </p>

    <!-- A question made of buttons. The agent clicks the matching ones. -->
    <div data-formguide-field="cover_reason" data-formguide-field-label="What is the cover for?" data-formguide="extract">
      <p class="label">What is the cover for? (choose any)</p>
      <button type="button" aria-pressed="false">Mortgage</button>
      <button type="button" aria-pressed="false">Family</button>
      <button type="button" aria-pressed="false">Income</button>
    </div>

    <p>
      <label for="notes">Anything else (explain only, no Done button)</label><br>
      <input id="notes" name="notes">
    </p>
  </form>

  <h2>Events</h2>
  <ul id="log"></ul>

  <script>
    // Adds a line to the list of events on this page.
    function show(text) {
      var item = document.createElement('li')
      item.textContent = text
      document.getElementById('log').appendChild(item)
    }

    // Your own code records which buttons are pressed. When the agent fills
    // in this question it clicks the matching buttons, so this runs then too.
    document.querySelectorAll('[data-formguide-field] button').forEach(function (button) {
      button.addEventListener('click', function () {
        button.setAttribute('aria-pressed', button.getAttribute('aria-pressed') === 'true' ? 'false' : 'true')
      })
    })

    // Both events bubble up from the field, so one listener covers the page.
    // Done was pressed. The value is on its way but not written yet.
    document.addEventListener('formguide:done', function (event) {
      show('formguide:done  ' + event.detail.label + ' (' + event.detail.fieldName + ')')
    })

    // The value is in the field.
    document.addEventListener('formguide:generated', function (event) {
      show('formguide:generated  ' + event.detail.label + ' = ' + event.detail.content)
      event.detail.field.classList.add('filled')
    })

    // Filling in a field also fires the normal input and change events, so
    // frameworks such as React and Vue notice the new value.
    document.getElementById('application').addEventListener('change', function (event) {
      var field = event.target
      show('change  ' + field.name + ' = ' + (field.type === 'checkbox' ? field.checked : field.value))
    })
  </script>

  <!--
    YOUR_AGENT_ID: your agent's id. In the Subcontext dashboard open Agents,
    your agent, Channels, Form guide. It's in the snippet shown there.
  -->
  <script
    id="formguide-embed-script"
    src="https://js.subcontext.com/formguide-latest.js"
    data-agent-id="YOUR_AGENT_ID"></script>
</body>
</html>