Change placeholder of input within an iframe

Question

Using Tumult Hype, I built a date range selector, and I'm currently adding the functionality to it... however, Hype likes to put it's HTML snippets into iFrames.

I'm having trouble targeting an input field that is in an iframe, so I can populate it with the current year. I'm also not able to give the iframe an ID either within Hype.

The path to the input is like this:

#startyear > div > #start-year-text > iframe > html > body > input#start-year-placeholder

obviously, using jQuery, this doesn't work:

$("#start-year-placeholder").attr("placeholder","1973");

neither does this:

$("#startyear > div > #start-year-text > iframe > html > body > input#start-year-placeholder").attr("placeholder","1973");

From the web page linked below, you'll see the first date range selectors. I'm trying to set the placeholder text attribute of the first year input dynamically. Right now it is hardcoded.

You can see the full HTML here: http://aceroinc.ca/question/footer.html

Answer 1

you can target it like this:

$('iframe').contents().find('input#start-year-placeholder')

note: this works on your page but in general if you're going to add more iframes, you may need to adjust the iframe selector. Also, this only works since the iframe is the same domain as the parent page.