Welcome to WebmasterWorld Guest from

Forum Moderators: open

Message Too Old, No Replies

Checking if the body html in an iframe is empty or notI

1:18 pm on Jul 16, 2010 (gmt 0)

5+ Year Member

I'm using Joomla and third party content manager which runs on taoj_contentmanager.1.0.4

In the contentmanager a user can create an article which must have a "Introtext" (this is checked by the JCE editor).
They can also fill in a Fulltext, in my case I want to user to always enter a fulltext so I want to create a check to make sure the fulltext isnt blank before saving.

I assumed this wouldn't be to difficult to do with a little bit of Javascript but as always, it seems more difficult then I expected.

In the FORM which handles it all the following Iframe is loaded:

<iframe frameborder="0" id="jxform[fulltext]_ifr" src="javascript:&quot;&quot;" style="width: 100%; height: 137px;"></iframe>

In the iFrame the following code is loaded

<html><head xmlns="http://www.w3.org/1999/xhtml"><meta content="IE=7" http-equiv="X-UA-Compatible"><meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<Loads of javascript files and code>
<body class="mceContentBody " id="tinymce" spellcheck="false" dir="ltr"><br _mce_bogus="1"></body>

I make sure my own javascript is loaded formcheck.js. As I said my goal is to check if the HTML in the body tag get's changed/isn't empty.

For now though creating an alert that displays the content of the body in the iframe is more then enough...

1 step at a time :)

I tried a lot of different approaches but I ended with this:

function checkForm() {
var form = document.getElementById["jxform[fulltext]_ifr"];
if(form == null) alert('form not found');

and this:

function checkForm() {
var form = document.adminForm;
if(form == null) alert('form not found');
var message = document.form["jxform[fulltext]_ifr"].body.innerHTML;

The above code doesn't work (obviously), so I'm hoping someone can help me out.

What's the right syntax to "call" the iFrame, it has the following id: jxform[fulltext]_ifr

What's the right syntax to "call/display" the content of a ID element that has square brackets in it's name?
I found the following solution: [jibbering.com...] but I can't get it to work.

With kind regards,

2:16 pm on Jul 16, 2010 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

document.form["jxform[fulltext]_ifr"] is the correct way to access the form named "jxform[fulltext]_ifr". But in your example, you have an iframe with an id of "jxform[fulltext]_ifr". Have you tried:

var iframe = document.getElementById("jxform[fulltext]_ifr");
var iframeBody = iframe.document.body;

I haven't tested that, but I think that's more along the lines of what you want to do. Hope that helps...
9:54 am on Jul 19, 2010 (gmt 0)

5+ Year Member

I had some help and this works:

function checkForm() {
var frame=document.getElementById("jxform[fulltext]_ifr");
var odoc=oframe.contentWindow.document;
if (odoc.body.innerHTML == '<br _mce_bogus="1">') {
var message="Fulltext cannot be empty!";

Cheers for the reply Fotiman!
12:13 pm on Jul 20, 2010 (gmt 0)

5+ Year Member

To make this work across a range of browsers:

function checkForm() {
var oframe = document.getElementById("jxform[fulltext]_ifr");
var odoc = oframe.contentWindow.document;
var strlenght = odoc.documentElement.getElementsByTagName('body')[0].innerHTML.length;
if (strlenght < 20) {
var message = "Fulltext cannot be empty!";