Category Archives: Javascript

jQuery way to limit input characters using javascript substring function

It’s an example of useful jQuery way to limit user entering a maximum set number of character in your input fields. Example makes use of javascript substring function to limit user upto 20 character which is triggered on keyup event. It truncate anything extra to that limit.

		var text = $(this).val();
		if(text.length > 20) {
			text = text.substring(0, 20);

jQuery pop up message box sliding from left to right and positioning horizontally at the center

Just wrote a simple sliding box script to make a message box appear sliding from left to the middle of web page. The box appears once a day. The first appearance is logged into a browser cookie, so if user opens the same website and if cookie was expired it appears again. Continue reading

Validating php multiple-value checkbox form element with javascript

In php a multiple-value form element such as checkbox is named suffixed with a set of square brackets. For example,

My commonly used colors are:

<form action="index.php" name="myform" method="post" onsubmit="return validate_form();">
<input type="checkbox" name="colors[]" value="red" />
<input type="checkbox" name="colors[]" value="green" />
<input type="checkbox" name="colors[]" value="blue" />

To validate these kind of checkboxes’ using javascript is little tricky. While on the other hand, having a single checkbox without multiple-value selection it would have been straight forward, something like this:

function validate_form()    {
// considering form element <input type="checkbox" name="color" value="red" />
if(true==document.myform.color.checked)    {
//checked, ok. Let it go.
}    else    {
//not checked, stop it.

Considering multiple-value selection the document.myform[].color.checked or document.myform[].color.length would throw javasript error. To make it work as expected the javascript code in your validate_form function will need some changes. Here we go.

function validate_form()    {
var flag = false; //at the initial state we assume that nothing is checked
for(var i=0; i < eval('document.myform.elements["colors[]"].length') ; i++)    {
if(true === eval('document.myform.elements["colors[]"]['+i+'].checked'))    {

flag=true; //at least some thing is checked, we are good to let them go past this check

//Hint: As a separated implementation somewhere though, if you wanted you could trigger the checked/un-checked status of your checkbox like the following:
//document.myform.elements["colors[]"][i].checked = false; //or true etc.

if(true==flag)    {
//checked (at least something), ok. Let it go.
//Hint: if you wanted that all your checkbox should have been checked check for the value of i variable
}    else    {
//not checked, stop it.

In line 3 of modified function above we use powerful eval function to evaluate the string passed to it. The eval function accepts any valid piece of javascript code and returns output value. In the passed code string to eval function we write normal (parent to child access) algorithm to access the elements property (and its element) of myform object which is a property of our web page (document) object.

Useful trim prototype (function) in core javascript

Below is the most commonly used trim prototype/function in javascript. Posting for reference.

String.prototype.trim = function()	{
	return this.replace(/(^\s*)|(\s*$)/g,"")

You can place the above code (wrapped in <script></script>) inside <header> section of your web page or you can place it in an external javascript file which you include in the header section.

//how to use it example
var my_string = "  Hello trim me           ";
var my_string_trimmed = my_string.trim();
//my_string_trimmed now has "Hello trim me"

Very useful tool.

Form DOM element not recognized (created) in ajax form in IE when placed with end tag missing

Skipping a form end tag </form> costed me almost a day (i had to go to bed abandoning the fixing for some time though;)). I had been using ajaxForm with jQuery to submit ajax form which was placed on a popup dialog box opened through ajax. The form worked well in Mozilla Firefox, Google Chrome, Safari but did not work in Internet Explorer 7 & 8 (IE7 & IE8 ; i didn’t test in other versions of IE but perhaps they would not work either). The IE simply would not create the <form> tag at all so if you try to alert $(“#formID”).length it would return always 0(zero). It started to work fine (in IE) when i placed </form> to mark the end of the form (i know it was a mistake to not to place it there though). Continue reading