Background: I do not want to use templating engines (e.g., EJS). I used the following code line to include an external HTML file (radio_btn) in then main HTML file (index.html):
<div id="search_radio"></div>
<script>
document.getElementById('search_radio').innerHTML = '<object data="radio_btn.html" >'
</script>
The above code seems to be successful when the goal is limited to transferring HTML characters and CSS style. Nevertheless:
Problem:
My external HTML file radio_btn.html is part of a block:
<input type="radio" id="and_search" name="search_method" value="And" checked>
<label for="and_search">And</label>
<input type="radio" id="or_search" name="search_method" value="Or">
<label for="or_search">Or</label><br>
Now, if I add this block of code directly in the index.html:
<form ...>
...
<div id="search_radio"> Code Here </div>
...
<button type="submit" hidden>Search</button>
</form>
It works, but if I use <object data="radio_btn.html" to include the external HTML instead of typing the HTML code directly in the index.html:
<form ...>
...
<script>
document.getElementById('search_radio').innerHTML = '<object `enter code
here`data="radio_btn.html" >'
</script>
...
<button type="submit" hidden>Search</button>
</form>
Then, the external JavaScript, which is responsible for processing the submitted form, cannot receive the "checked" status of the buttons (according to an error message in the console). However, this code works as far as including the HTML characters and CSS styling.
Research: The suggested suggestions to the partially similar situations (not exactly the same problem) did not work. For example, I tried:
document.addEventListener("DOMContentLoaded", e => {
document.getElementById('search').addEventListener('submit', SearchIt)
})
The problem could be related to the asynchronous loading of HTML and adding the EventListerners. The code didn't work, so either that was not the problem, or this was not the solution.
Request: Please kindly and only use Vanilla JavaScript and HTML solutions.
Best Regards,
Eric