Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

180
Vistas
JavaScript cannot read form output when external html included by <object data = abc.html>

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

about 4 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda