Posts Tagged ‘JavaScript’

Check IFRAME Text by Javascript

November 20th, 2009

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 :)

jQuery Time Picker UI

November 14th, 2008

Today, I went through this nice jQuery time picker UI which allows picking the time after clicking in the input box. 24h and 12h formats are available to select.

jQuery Time Picker UI

jQuery Time Picker UI

Got them down and played with it for a while. Must say it’s really fast, you just have to mouse over and select the time. 24h format didn’t have any prefix “AM/PM” but as usual there are prefix for 12h format. One thing is, when it shows the prefix, it goes out of the input box as a result you can only see half of “a” or “p”. So went through the codes and just added a simple CSS class just for this 12h format so that when someone select 12h formats it shows the prefix fully.

Here are some modifications.

CSS (styles.css)
.width80 {
width:80px !important;
}

Now go to the index.html and in line# 233 add the following line ….

$('#demo-4').addClass('width80');

If you use basic 12h format too, then add another line in 234

$('#demo-2').addClass('width80');

That’s it! Now it looks better I guess.

See the full prefix

Full prefix view

You can download the source code from here.

Get Adobe Flash playerPlugin by wpburn.com wordpress themes