I have a page where it loads an iframe (contains a form on same domain) which is hidden until the user clicks on a button, which invokes jQuery slideToggle() to show/hide it.
When a user submits the form it loads a 'thank you' page in the iframe. What then happens is that if the user then clicks on the button again, jQuery checks the ID of the iframe body element to see if the form is there, if not then it loads the form iframe and displays it.
The code I have got works in Chrome but falls over in Firefox;
Error message in console => TypeError: frames['form-iframe'] is undefined
(and I imagine IE when I get to testing it).
Any ideas on why, or how to solve this issue would be greatly appreciated.
HTML snippet
<label id="tell-a-friend-button">
<div class="radio-button radio-button-grey">
<div class="label-text">YES</div>
</div>
<span>Tell a friend</span>
</label>
<div id="tell-a-friend">
<iframe src="me.asp?email=foo" frameborder="0" id="form-iframe"></iframe>
</div>
jQuery snippet
$("#tell-a-friend-button").click(function(){
// set iframe content
$("#form-iframe").ready(function () {
var frame = $('body', frames['form-iframe'].document).attr('id');
if (frame == "tell-form") {
$('#tell-a-friend').slideToggle();
} else {
// is the thank you page
// load the iframe
$("#form-iframe").attr("src", "me.asp");
}
});
});