Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

177
Views
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
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!