jsoneditor | A webbased tool to view, edit, format, and validate JSON | Frontend Framework library

I am trying to reference a HTML tag that is generated by a django's django_jsonforms link JSON Schema link via javascript to dynamically update the form. For example 2 dropdowns in a form, if you make a selection in the 1st dropdown the 2nd dropdown should update. I've done this for HTML selection tags that I manually typed out but I am trying to get this to work for HTML generated by JSON Schemas. Here is what I've tried:

• inspect HTML page and try to call the tag by name with

var project_selection = document.getElementsByName("form[project]")[0];

this didn't work, which I was a little surprised by since I see when I inspect the page that the select tag has name="form[project]"

• then I thought maybe the JSON Schema renders the tag after the javascript runs so I tried adding defer into my <script defer> and that didn't work

• I tried using JSON Schema $id #anchor and $ref but none of those worked to reference the tag by ID

when I try a dummy tag with name I get a NodeList back that I can access with project_section[0], however when I try to do the same thing for this select tag generated by django's json schema i get what it looks like an empty list but the tag is under it (however I cannot access it). See the figures below.

dummy test for h1 tag with name

actual django generated select tag with name (looks empty but it's not when I expand it, however, I cannot index [0] item on it)

I am sure someone has come across this before so I hope this is an easy answer.

At the end of the day, I know I need to use the following with the JSON Schema to do a similar to onchange as shown in link

var element = document.getElementById('editor_holder');

var editor = new JSONEditor(element, options);

editor.on('change',function() {
  // Do something
});

thanks for taking a look in advance!

references:

• json schema
• json schema editor github
• json schema python
• json schema python for django