DEV Community

Discussion on: How do I get all the input tag elements on a web page?

Collapse
 
somedood profile image
Basti Ortiz • Edited

The reason why this doesn't work is because the <input> elements are inside an <iframe> element. To solve your problem, you may need to be clever about it by (recursively) iterating over all <iframe> elements and their contentWindow properties to access the <input> elements you are looking for.

If you want to keep things simple, you can also just change your onload handler as such:

document.onload = function() {
  const iframe = document.getElementsByClassName('wufoo-form-container')[0];
  const documentInsideTheIframe = iframe.contentWindow.document;
  const inputs = documentInsideTheIframe.getElementsByTagName('input');
  console.log(inputs);
};

However, this comes with another problem. The site disables cross-origin access to <iframe> elements for security reasons (which is a very good thing). The main website has a domain of www.wufoo.com while the <iframe> containing the <input> elements comes from the domain gallery.wufoo.com. Since the two domains are not the same, any access to the DOM of the <iframe> is not allowed.

In other words, what you're asking for is impossible because the site is pretty secure (which, again, is a very good thing).