Count Number of letter in Textarea or Textbox using Javascript

Kindly write anything in Textbox:

Characters left

Code:

Javascript Function:

<script language="javascript">
function textCounter(field,cntfield,maxlimit) {
if (field.value.length > maxlimit) // if too long...trim it!
field.value = field.value.substring(0, maxlimit);
// otherwise, update 'characters left' counter
else
cntfield.value = maxlimit - field.value.length;
}
</script>

HTML
<form name="frm">
<textarea name="comments" id="comments" cols="30" rows="4" wrap="physical" onKeyDown="textCounter(document.frm.comments,document.frm.remLen1,100)"onKeyUp="textCounter(document.frm.comments,document.frm.remLen1,100)" tabindex="14"> </textarea>
<br />
<input readonly type="text" name="remLen1" style="border:0; width:30px;" size="3" maxlength="3" value="100"> Characters left
</form>

Calendar using Javascript

DEMO:

Date:

(Click in Textbox)

Click on below link to Download .js file
Click Here

Code for HTML Page
<script language="javascript" type="application/javascript" src="scw.js"></script>

Date:<input  type="text" name="test" onselect='scwShow(this,event);' onclick='scwShow(this,event);' readonly="readonly" />

To apply COMMON CSS to all Textbox, Radio Button, Checkbox

Below CSS can be used to apply to all TEXTBOX, RADIO BUTTON or CHECK BOX without giving class.

CODE to be implemented in style.css file:

input[type=text] 
{
//Here will be property as per requirement. 
}

input[type=radio] 
{
//Here will be property as per requirement.
}

input[type=checkbox] 
{
//Here will be property as per requirement. 
}

Same way you can apply CSS to any input type.

How to disable HTML attribute using JAVASCRIPT

Below JavaScript can be used to disable HTML Attributes during run time. (Eg: TextBox, Select Box, Check Box, Radio Button, Etc)

<script>
window.onload= function()
{
          DisableEnableForm(document.frmwitness,true);
 }

function DisableEnableForm(xForm,xHow){
  objElems = xForm.elements;
  for(i=0;i
  {
       var ck = objElems[i].type;
       if(ck=="select-one" || ck=="text")
      {
          objElems[i].disabled = xHow;
       }
   }
}
</script>

Note: You can call above function as per requirement.

VALIDATE FILE EXTENSION USING JAVASCRIPT

This Javascript can be used to allow only few file extension only.

Include Below Script
<script>
    function validateFileExtension(fld)
    {
        if(!/(\.zip|\.rar|\.doc|\.docx|\.ppt|\.xls|\.xlsx|\.pptx|\.jpg|\.jpeg|\.pdf)$/i.test(fld.value))         
       {
            alert("Invalid image file type.");
            fld.value='';
            fld.focus();
            return false;
        }
        return true;
    }
</script>

Call above function in HTML as given below:
<input type="file" name="uploadFile1" id="uploadFile1" onchange="return validateFileExtension(this)" />

Note:
Here as mention in Javascript only file with .zip, .rar, .doc, .docx, .ppt, .xls, .xlsx, .pptx, .jpg, .jpeg, .pdf  will be allowed. This can be changed as per requirement.

Allow only numeric value through Javascript

Below JavaScript will allow only to enter numeric value in Textbox. This javascript can be used for Mobile number, Salary, Budget, etc.

Include below JavaScript
<script language="javascript" type="text/javascript">
function isNumber(field)
{
    var textbox = document.getElementById(field);
    var re = /^[0-9]*$/;
    if (!re.test(textbox.value))
    {
        textbox.value = textbox.value.replace(/[^0-9]/g,"");
    }
}
</script>

Call this fuction in HTML as given below:
<input type="text" name="test" id="test" onkeyup="isNumber('test');" />