The importance of JavaScript 'return'

Recently, while coding for a Text Field value padded with left zeros, realised the importance of the RETURN key word for the FUNCTION written in JavaScript. Before i mention the actual importance, let me describe you the situation.

Scenario: A Text box need to be padded with zeros and should have the length of 7 digits, even the data entered is less than 7.

Ex: When the key board input being 88, the text box should show 0000088. Note the ZEROs padded on left.

So, started with a JavaScript function as mentioned below

function PadZeros(x)
    {
        var v = x.value;
        while(v.length<7)
        {
            v = '0' + v;
        }
        var ss = document.getElementById(x.id);
        ss.value = v;
    }

After this, the text box is padding with ZEROs and the code is perfectly running. To allow this to code execute for any given text box, all you have to do is, add the ATTRIBUTE to that text box. And while adding keep one thing in mind that, we would be calling this function on BLUR, ie., LOST FOCUS of the text box. The code is as mentioned below.

            this.txtPCode.Attributes.Add("onblur", "PadZeros(this);");

Please note the 'this' keyword. The usage of 'this' keyword has many possibilities. Let me see that, one day will post where the 'this' keyword is used and their context. And also note that, neither the function is returning any value nor the text box is added with the code that handles the output of the function. Will come to that in short.

 

Every thing is working perfectly well and going on smooth. But suddenly, i realised that the text box is just padding ZEROs when there is no Input. I see all ZEROs in the text box as 0000000. Then came the real trick to the function.

function PadZeros(x)
    {
        var v = x.value;
        if(v.length == 0)
        {
            var vTe = document.getElementById(x.id);
            vTe.focus();
            alert('Please enter Provider Code .. ');
        }
        while(v.length<7)
        {
            v = '0' + v;
        }
        var ss = document.getElementById(x.id);
        ss.value = v;
    }

What do you see here is the mechanism to set the focus back to the text box. Great... but that even is not solving my purpose of leaving the text box blank when there is no input. This function is still adding ZEROs to no input and showing all ZEROs. Then came the purpose of the 'return' keyword. The entire requirement is simply solved by this keyword. All i've done is.. changed the code as mentioned below.

function PadZeros(x)
    {
        var v = x.value;
        if(v.length == 0)
        {
            var vTe = document.getElementById(x.id);
            vTe.focus();
            alert('Please enter Provider Code .. ');
            return false;
        }
        while(v.length<7)
        {
            v = '0' + v;
        }
        var ss = document.getElementById(x.id);
        ss.value = v;
        return true;
    }

At the code behind added 'return' as shown here

            this.txtPCode.Attributes.Add("onblur", "return PadZeros(this);");

That's all.. hoollaa... What do you say ?

Technorati Tags: JavaScript, PadZeros, return