Check IFRAME Text by Javascript

Most of the Rich Text Editor use iframe, and besides server side validation it’s necessary to check client side validation with JS before storing any data. Let’s say you want to check if the body of iframe is empty. This is a little bit tricky, like you can easily check a textarea value with document.getElementById(idoftextarea).value; but it won’t work in case of iframe. Let’s consider the following scenario…

<iframe name="richEditorIframe" width="100%" height="25%" src="test1.txt">
</iframe>
 
<form name="formName">
     <textarea name="textarea" cols=80 rows=18 id="textArea">
         This is a test
     </textarea>
      <br />
      <button type="submit" value="Submit" />
</form>

Now, to check if iframe is getting in Database with empty value we can make a function like the following….

<script type="'text/javascript'">
    function checkEmpty(){
        var elementValue = window.frames['richEditorIframe'].document.body.innerText;
        if(elementValue=='')
        {
            //say something here
            return false;
        }
        return true;
    }
</script>

instead of innerText you can use innerHTML but then in most of the Text Editor it will show some HTML element which means you are not getting empty result even if you didn’t write anything. So, innerText will give you the iframe body value if it’s written. Now let’s call this function onSubmit in the form…

<form name="formName" onSubmit="return checkEmpty();">
      <textarea name="textarea" cols=80 rows=18 id="textArea">
          This is a test
       </textarea>
       <br />
      <button type="submit" value="Submit" />
</form>

That’s it, now it’s simple