Javascript to Format SSN (Social Security Number)

Posted: August 17, 2010 in ASP.Net, Javascript

If you need to format the SSN (Social Security Number) in the format NNN-NN-NNNN, you can use a little bit of Javascript with ASP.Net for when the user enters something in the text box control for example.

ASP.Net
First bind the onkeydown event to the text box control that you want to apply formatting on as follows:

 
' Add key events for SSN valildations
txtCreditCheckSSN.Attributes.Add("onkeydown", "jsFormatSSN(this);")

Javascript
Now add the following Javascript code to the page that has the control to format:

 
<script type="text/javascript">
   //--------------------------------------------------------
   // Function to format SSN as the user types in the field.
   //--------------------------------------------------------
   function jsFormatSSN(asSSNControl)
   {
      // Remove any characters that are not numbers
      var re = /\D/g; 
      var lvCurrentSSNControlID = asSSNControl.id;               
      var lvSSNControl = lvCurrentSSNControlID.substring(lvCurrentSSNControlID.lastIndexOf("_") + 1);
      var lvParent;
      var lvCompare;
      var lvRequired;
      // Get which control sent the request
      if (lvSSNControl == "txtCreditCheckSSN") 
      {
          lvParent = $get('<%=txtCreditCheckSSN.ClientID %>');
      }
      var lvNumber = lvParent.value.replace(re, "");
      var lvLength = lvNumber.length;
      // Fill the first dash for the user
      if(lvLength > 3 && lvLength < 6)
      {
          var lvSegmentA = lvNumber.slice(0,3);
          var lvSegmentB = lvNumber.slice(3,5);
          lvParent.value = lvSegmentA + "-" + lvSegmentB;
      }
      else
      {
          // Fill the dashes for the user
          if(lvLength > 5)
          {
              var lvSegmentA = lvNumber.slice(0,3);
              var lvSegmentB = lvNumber.slice(3,5);
              var lvSegmentC = lvNumber.slice(5,9);
              lvParent.value = lvSegmentA + "-" + lvSegmentB + "-" + lvSegmentC;
          }
          else
          {
              // If nothing is entered, leave the field blank
              if (lvLength < 1)
              {
                  lvParent.value = "";
              }
              lvParent.value = lvNumber;
          }
      }
   }
</script>   
Advertisements
Comments
  1. Great script! It would be great to universalize this script for use with other formatting methods like phone numbers, etc.

  2. mohan says:

    Hi
    the code is not working properly i am getting error while running this Jsp error at line no 17 ( lvParent = $get(”); )

    i tried this code using Java
    Can u please provide full code with textbox

    • amitchandnz says:

      @Mohan – note that this piece of code is for Javascript and NOT Java…these are two different programming languages! The blog post shows how to bind it to a textbox with ASP.Net.

  3. Max says:

    I think line# 35 should be changed to
    var lvSegmentC = lvNumber.slice(5,8);
    from
    var lvSegmentC = lvNumber.slice(5,9);

    Coz SSN is 9 digits and in slice the index starts at 0.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s