Antecedentes: no quiero usar motores de plantillas (p. ej., EJS). Usé la siguiente línea de código para incluir un archivo HTML externo (radio_btn) en el archivo HTML principal (index.html):

 <div id="search_radio"></div> <script> document.getElementById('search_radio').innerHTML = '<object data="radio_btn.html" >' </script>

El código anterior parece tener éxito cuando el objetivo se limita a transferir caracteres HTML y estilo CSS. Sin embargo:

Problema:

Mi archivo HTML externo radio_btn.html es parte de un bloque:

 <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>

Ahora, si agrego este bloque de código directamente en index.html:

 <form ...> ... <div id="search_radio"> Code Here </div> ... <button type="submit" hidden>Search</button> </form>

Funciona, pero si uso <object data="radio_btn.html" para incluir el HTML externo en lugar de escribir el código HTML directamente en 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>

Entonces, el JavaScript externo, que es responsable de procesar el formulario enviado, no puede recibir el estado "marcado" de los botones (según un mensaje de error en la consola). Sin embargo, este código funciona hasta el punto de incluir los caracteres HTML y el estilo CSS.

Investigación: Las sugerencias sugeridas para las situaciones parcialmente similares (no exactamente el mismo problema) no funcionaron. Por ejemplo, probé:

 document.addEventListener("DOMContentLoaded", e => { document.getElementById('search').addEventListener('submit', SearchIt) })

El problema podría estar relacionado con la carga asíncrona de HTML y la adición de EventListerners. El código no funcionó, así que ese no era el problema o esta no era la solución.

Solicitud: tenga la amabilidad de utilizar únicamente las soluciones HTML y JavaScript de Vanilla.

Saludos,

eric