How to edit form in iframe

Question

Hi i have a form i used jquery to give a value to submit button, it is working fine.

jQuery('#frm_f_container.with_frm_style .submit input[type="submit"]').val('');

Now the form code is placed inside the wp super pop up pro. It is a pop up plugin it contains iframe when i inspect with firebug

The same jquery is not working so i tried contents() as suggested for iframe but this too not setting the button value here is the code i tried

jQuery('.sppro_cboxIframe').contents().find('#frm_f_container.with_frm_style .submit input[type="submit"]').val('');

Here .sppro_cboxIframe is the class placed with iframe like this

<iframe class="sppro_cboxIframe" frameborder="0" name="sppro_cbox1381566909072" src='url'>

when i view the source i can't able to see iframe like the above.

Now how to change or add values to the form inside it. Any help would be thankful.

Answer 1

You won't be able to manipulate elements inside the iframe from outside the iframe with javascript. See this answer regarding same origin policy:

jQuery/JavaScript: accessing contents of an iframe

Check to see if that plugin allows you to pass in your jQuery into the iframe. That's the only way you'll get to manipulate the elements inside the iframe.

Answer 2

Assuming jQuery defined as $ inside the <iframe> , passing same origin , and that the page inside the <iframe> has started loading, you can get the Window reference of an HTMLIFrameElement via it's contentWindow property.

// get the <iframe> and then it's contentWindow
var iWin = document.getElementsByClassName('sppro_cboxIframe')[0].contentWindow;
// now to use jQuery inside <iframe>
iWin.$.find('#frm_f_container.with_frm_style .submit input[type="submit"]').val('');

Answer 3

Your code is fine, here is the demo: http://jsfiddle.net/T86yw/

jQuery('.sppro_cboxIframe').contents().find('#frm_f_container.with_frm_style .submit input[type="submit"]').val('New Value');

The issue is somewhere else. As you say both pages have the same origin, another thing to check is whether the iframe is already loaded when you run the code.