jQuery quickie: Reading the contents of form fields in an iframe

This post is more than 2 years old.

Mihai asks:

I'm having trouble reading the contents of an iframe with jQuery. I have a Rich Text Editor (MceEdit) that dynamically generates an iframe that holds al the styled text until sumbit. Only then, it populates the textarea that gets POSTed to the server. What I want to do, is read the content of the iframe before submit, so I can send to the server via AJAX. (I'm trying to implement an autosave feature). I've already tried something like $('iframe').contents() or $('iframe').contents().html() but it doesn't work.

It looks like you were real close. The contents() method of jQuery is exactly what you want to use. The docs even specifically mention it being the one to use for iframes. Here is the demo I came up. I began without any code, just some simple html.

<html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script> $(document).ready(function() {

}) </script> </head>

<body>

<input type="button" id="testBtn" value="Click to read">

<iframe src="test2.cfm" id="testFrame"></iframe> </body> </html>

Ok I lie - there is a bit of code - the document ready block, but it's not doing anything yet. Now let's look at test2.cfm:

<form> <textarea id="content" cols="20" rows="20"> </textarea> </form>

So far so good. Now let's make that button actually do something. Here is what I added:

$("#testBtn").click(function() { var text = $("#testFrame").contents().find("#content").val(); console.log(text); });

So as I said, contents() was what you wanted. I just tie to that a find() command to get my textarea and then use a val() to get the value. If you want to try this, click the button below, and please note I make use of console. If your browser doesn't support console this demo will not work. It should be obvious that the concept still works cross platform if you remove the console call.

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by db posted on 1/13/2011 at 7:29 PM

if you're using tinymce, you might like this:
http://tinymce.moxiecode.co...

Comment 2 by Mihai Baboi posted on 1/14/2011 at 1:48 AM

Thanks for your help, Ray. While I was waiting for your answer, I did some more research. It turns out, tinyMce offers a convenient function in it's API. if you call tinyMCE.triggerSave(); it populates the textarea as it would on submit, and then you can read the contents of it as you normally would. Just thought I'd drop this tip. Needles to say, this only works with tinyMce. Any other editor, that doesn't offer this kind of function would have to be read as you described in the article.

Comment 3 by Dave Hoff posted on 1/14/2011 at 2:41 AM

Just wanted to note that this will only work if the URL loaded in the iFrame resides on the same domain or else XSS rules apply

Comment 4 by Raymond Camden posted on 1/14/2011 at 2:52 AM

Good point - thanks.

Comment 5 by Phillip Senn posted on 1/14/2011 at 9:52 PM

In the jQuery cookbook, they suggest putting the JavaScript code just before the /body. That way you don't have to call $(document).ready.
At first I thought this was a nit-pick, but I find myself doing it more and more.
It helps me feel like I have more control for some reason - like I understand what in the h I'm doing.

Comment 6 by Raymond Camden posted on 1/14/2011 at 9:56 PM

I prefer $(document).ready as it just feels much more obvious.

Comment 7 by MIhai Baboi posted on 1/14/2011 at 10:06 PM

Your probably right, but what do you do when your working via templates? You need a bit of jquery in a page, and it doesn't make sense to go into the layout page and write the code before the body...

Comment 8 by Raymond Camden posted on 1/14/2011 at 10:08 PM

THe thing is - you can put $(document).ready _anywhere_. So given foo.cfm is some view I just put it on top. So it "feels" right even though in the final HTML output it is within a DIV perhaps. It still works fine too.

Comment 9 by Dave Hoff posted on 1/14/2011 at 11:06 PM

Yeah, I think its really just a matter of coding style. Personally I like the consistency in using $(document).ready and it's very literal in describing what your doing.

Comment 10 by JP posted on 1/21/2011 at 1:03 AM

Can you have multiple $(document).ready function calls on a page? Just wondering because I've got a page with a couple different jquery plugins, each requiring code to be added in $(document).ready ()

Comment 11 by Raymond Camden posted on 1/21/2011 at 1:04 AM

Yes, whic is one more reason I love the feature.