VanillaJS Form.io Renderer

by brendanbond

HTML

<script src="https://unpkg.com/formiojs@latest/dist/formio.full.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/formiojs@latest/dist/formio.full.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

  <div class="container">
    <div id="formio"></div>
  </div>

JavaScript

const formDefinition = {
  "title": "Simple Form",
  "name": "simpleForm",
  "path": "simpleform",
  "type": "form",
  "display": "form",
  "tags": [],
  "components": [{
      "label": "Select",
      "tableView": true,
      "key": "select",
      "type": "select",
      "input": true
    },
    {
      "label": "Fetch Data",
      "action": "custom",
      "showValidations": false,
      "tableView": false,
      "key": "submit",
      "type": "button",
      "custom": "fetch('https://swapi.dev/api/people/1')\n  .then((res) => res.json())\n  .then((res) => alert(`Received information about ${res.name}!`))",
      "input": true
    }
  ],
  "settings": {},
  "properties": {},
  "project": "631f7d35f1fa442456afb1ca",
  "controller": "",
  "revisions": "",
  "submissionRevisions": "",
  "_vid": 0,
  "created": "2023-07-18T17:17:13.655Z",
  "modified": "2023-07-18T21:01:28.917Z",
  "machineName": "habit-tracker:simpleForm",
  "plan": "commercial"
}
Formio.createForm(document.getElementById('formio'), formDefinition).then(function(form) {
  const el = form.getComponent('select');
  // console.log(el.refs);
  el.refs.textContent.addEventListener('input', (event) => {
    console.log("Searched!", event.target.value)
  })
  form.on('input', (changed) => {
    console.log(changed);
  })
});