How to display current date and time on a webpage using JavaScript

I make a habit of displaying the current date and time on website backoffice panels I develop for clients. The reason being that time is money for clients and they need to always know the time so they can manage it better and prioritize their work accordingly. I use JavaScript to display the date and time on the website backoffice panel.

You can download the JavaScript code from here. Hope this helps. If you have any questions/comments then please let me know

How to post form from a popup window to a parent window

I was working on a client website and he requested that the form fields on a pop-up window should be posted to the parent window and the process should continue in the parent window from there on.

I was thinking of a quick ready made solution to this problem and surprisingly there were not many after doing a search for it on Google. I thought “How hard could it be?” and wrote a few lines of JavaScript and the task was complete in 15 minutes. It was quite easy.

I created the form and the form fields on the parent page as seen below

<html>
<head></head>
<body>
<form name="frmPost">
<input type="hidden" name="txtFname"/>
<input type="hidden" name="txtLname"/>
</form>	
</body>
</html>

Then I wrote the JavaScript code on the pop-up window which would be actually posting the fields to the parent window.

<script type="text/javascript">
function post_it() {
opener.document.forms[0].action = document.forms['frmInfo'].action;
opener.document.forms[0].txtFname.value = document.forms['frmInfo'].txtFname.value;
opener.document.forms[0].txtLname.value = document.forms['frmInfo'].txtLname.value;
opener.document.forms[0].submit();
}
</script>

I called the above function from the pop-up window page and it started to work correctly by posting the fields to the parent window.

The opener keyword from above is a JavaScript object referring to the parent page from which the pop-up window was opened. The forms[0] refers to the first form on the parent page. The forms[‘frmInfo’] refers to the frmInfo form on the pop-up page. Please note that you can reference forms via their indices or names as you can see from the above example.

If you would like to close the pop-up window after posting the form then you can add one more line as follows

<script type="text/javascript">
function post_it() {
opener.document.forms[0].action = document.forms['frmInfo'].action;
opener.document.forms[0].txtFname.value = document.forms['frmInfo'].txtFname.value;
opener.document.forms[0].txtLname.value = document.forms['frmInfo'].txtLname.value;
opener.document.forms[0].submit();
window.close();
}
</script>

Hope the above helps.

How to validate only digits and decimal points in Javascript?

Our company had implemented an online payment form where customers could pay online on the company website against outstanding invoices or any other service. However, the validation on the form regarding the payment amount field was pretty simple as it was just checking whether the customer had input amount in the field or not and not whether the format of the data was correct or not. For e.g. the customer could have just entered some alphabets and the validation would not have been able to pick it.

Even though this problem would not have caused any major problem and the payment mechanism later on would have caught it, the issue still had to be resolved as it was bad in terms of user friendliness. I coded a function which would check for illegal values and point them out to the user.

function numFilter(input) {
s = input.value;
filteredValues = "1234567890.";
var numValid = 0;
for (i = 0; i < s.length; i++) {  
	var c = s.charAt(i);
	if (filteredValues.indexOf(c) == -1) {} else { numValid++ };
}
if (numValid == s.length) 
        return true;
else
	return false;	
}

The above function checks whether the input values in the text box are numbers and decimal point and alerts if a character other than the above is used. The function could also be used on the onkeypress event of the input box with slight modifications.

Hope the above helped.

How to customize the style drop down in FCKEditor

One of my clients wanted to use the same CSS classes which were being used on the public website in the FCKEditor so that he could apply the classes in one go while writing the content.
Now the Style drop down is populated through the fckstyles.xml in FCKEditor directory root. Its basically an XML file where you can instruct FCKEditor to generate which tag and apply which style to that tag. Below is an excerpt of the XML present in that file

<Styles>
<Style name=”Custom Bold” element=”span”>
<Attribute name=”style” value=”font-weight: bold;” />
</Style>
</Styles>

You can set the name of the class in the name attribute. The HTML tag to generate in the element attribute. Define the style in the attribute tag by writing the actual style formatting in the value attribute.
Define the number of classes you wish to define here, save the file and refresh the page. You will now see all the styles you have defined in the fckstyles.xml

Hope the above helps