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.

[Same origin](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Same_origin_policy_for_JavaScript)? — Paul S., Oct 12 '13 at 09:03

score 1 · Answer 1 · edited May 23 '17 at 11:50

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.

edited May 23 '17 at 11:50

Community

1
1

answered Oct 12 '13 at 09:01

Josh KG

5,050
3
20
24

Thanks i tried giving this script in the plugin html editor.when i save i see the script are started with `<![CDATA[ ` – rram Oct 12 '13 at 09:07

score 0 · Answer 2 · answered Oct 12 '13 at 10:54

0

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('');

answered Oct 12 '13 at 10:54

Paul S.

64,864
9
122
138

`TypeError: document.getElementsByClassName(...)[0] is undefined`. When i view the source from the browser i can't find the iframe with this class.That is why the error coming.I don't know.Thanks for the help @Paul S – rram Oct 12 '13 at 12:26

score 0 · Answer 3 · answered Oct 12 '13 at 17:21

0

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.

answered Oct 12 '13 at 17:21

Christophe

27,383
28
97
140

Thanks when i view the source ctrl+u i can't able to see this iframe code.Is that causing problem? @Christophe – rram Oct 12 '13 at 18:35
Are you talking about my demo, or your page? – Christophe Oct 13 '13 at 00:21
Am talking about my page – rram Oct 13 '13 at 11:00
The source of the parent page won't show the iframe code. To see it you have to look at the source code of the iframe itself. – Christophe Oct 13 '13 at 16:41

How to edit form in iframe

3 Answers3