Dynamically fetched html + css + (javascript eventlistener not working)

Question

I have a form with CSS, javascript and HTML in a file. When a user clicks on a button, I want to load the contents of the file into my page so the user can complete the form. I want to do this to save data since my users will only use this maybe 5% of the time.

I have a fetch request that calls the file and loads it in.

fetch('../templates/form.php/',{
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
      },
    body:JSON.stringify({form:true}),
})
.then(resp => resp.text())
.then(response => {
    document.querySelector('body').insertAdjacentHTML('beforeend',response);
})
  .catch(function(error){ console.log(error); });

HTML file (simplified)

<style>
   #form{
      height:100%;
      width:100%;
      position: absolute;
}
  #submit{
      width:60px;
      height:30px;
}
</style>
<div>
    <script>
    window.addEventListener("load", function() {
        document.getElementById("submit").addEventListener("click", function() {
            console.log('form submitted');
        });
    });
    </script>
    <form id="form">
        <input name="company-name">
        <button id="submit"></button>
    </form>
</div>

When I load the file with the fetch request, it works perfectly, the form is loaded in, and the CSS is applied. But I cannot get the onclick effects to work. If I put the console.log() inside of the onclick="" on the submit button, it works. How can I get the javascript to work? Its not practical to put javascript inside an onlcick function in an element. I am looking for a solution that I can use all 3 datatypes in the same file.
Any ideas that would be awesome, thank you

Does this answer your question? [Can I use Element.insertAdjacentHTML() to insert tag script](https://stackoverflow.com/questions/57209520/can-i-use-element-insertadjacenthtml-to-insert-tag-script) — CBroe, Jan 13 '21 at 10:57
not exactly, this answer is explaining how to add entirely loaded files of a certain type. i am looking to insert the whole file with all 3 datatypes and have them run. the html a and css work file. looking for a way to get the JS to run. either a way to fire it, or force the DOM to recognize it — Jill John, Jan 13 '21 at 11:04
https://stackoverflow.com/questions/2592092/executing-script-elements-inserted-with-innerhtml has approaches how to solve it when innerHTML is used, probably adaptable for this. — CBroe, Jan 13 '21 at 11:10

score 0 · Answer 1 · answered Jan 13 '21 at 11:40

Inside of success function of Fetch
If someone has another solution, I will accept that one as correct.

  var setInnerHTML = function(elm, html) {
  elm.innerHTML = html;
  Array.from(elm.querySelectorAll("script")).forEach( oldScript => {
    const newScript = document.createElement("script");
    Array.from(oldScript.attributes)
      .forEach( attr => newScript.setAttribute(attr.name, attr.value) );
    newScript.appendChild(document.createTextNode(oldScript.innerHTML));
    oldScript.parentNode.replaceChild(newScript, oldScript);
  });
  }
   document.getElementById('dynamic').innerHTML = response;
   setInnerHTML(document.getElementById('dynamic'), response);

Dynamically fetched html + css + (javascript eventlistener not working)

1 Answers1