Trail Blazer Knowledge Base

 

Home : Web Tools : Phone box nice format

Knowledge Base







User:

Password:



Article ID: KB145
Keyword Name: POST, GET, additional tools, Phone
Created: May 11, 2018
Viewed: 9816

Phone box nice format

On our Trail Blazer built forms you may notice that the phone box auto formats the phone number to a standard  (###) ###-####.  You may want to also include additional Validation Functions you will Validate on the event 'onsubmit'.

The code for this is something your web team may want to consider using if they are designing a GET form for your website.

 The HTML for the Phone label and Text box we create looks like this:
</select><span id="ctl24" style="color:Red;visibility:hidden;">*</span><br style="clear:both;line-height:0px" />
<br style="clear:both;line-height:0px" />
<span style="display:'';display:inline-block;width:120px;display:-moz-inline-box;display:inline-block;width:120px;height:1.2em;">Home Phone</span><input name="HomePhone" type="text" maxlength="14" id="HomePhone" onKeyUp="FormatPhone(this);" class="inputText" style="width:125px;" /><span id="ctl27" style="color:Red;visibility:hidden;">Format (000) 000-0000</span><br style="clear:both;line-height:0px" />

The main thing, in Green, is the Java FormatPhone method.  That method auto adjusts the field.

The Java for the FormatPhone method:

<script type='text/javascript'>
function FormatPhone(phone)                               
   {                                                      
   var key;                                               
                                                          
   if (window.event)                                      
      key = window.event.keyCode;                         
                                                          
   if(key==37) //LEFT_ARROW                               
     return;                                              
                                                          
   if(key==39) //RIGHT_ARROW                              
     return;                                              
                                                          
   if(key==8)  //BACK_SPACE                               
     return;                                              
                                                          
   if(key==09) //TAB                                      
     return;                                              
                                                          
   if(key==16) //CTRL_TAB                                 
     return;                                              
                                                          
   if (phone.value == '(' )                               
     return;                                              
                                                          
   var digits = phone.value.replace(/[^0-9]/ig, '');      
                                                          
   if (!digits) {                                         
      phone.value = '';                                   
      return;                                             
      }                                                   
                                                          
   if (digits.length == 3) {                              
      phone.value = '(' + digits.substring(0, 3) + ') ';  
      return;                                             
      }                                                   
                                                          
   if (digits.length == 4) {                              
      phone.value = '(' + digits.substring(0, 3) + ') ' + 
      digits.substring(3, 4);                             
      return;                                             
      }                                                   
                                                          
   if (digits.length == 5) {                              
      phone.value = '(' + digits.substring(0, 3) + ') ' + 
      digits.substring(3, 5);                             
      return;                                             
      }                                                   
                                                          
   if (digits.length == 6) {                              
      phone.value = '(' + digits.substring(0, 3) + ') ' + 
      digits.substring(3, 6) + '-';                       
      return;                                             
      }                                                   
                                                          
   if (digits.length == 7) {                              
      phone.value = '(' + digits.substring(0, 3) + ') ' + 
      digits.substring(3, 6) + '-' +                      
      digits.substring(6, 7);                             
      return;                                             
      }                                                   
                                                          
   if (digits.length == 8) {                              
      phone.value = '(' + digits.substring(0, 3) + ') ' + 
      digits.substring(3, 6) + '-' +                      
      digits.substring(6, 8);                             
      return;                                             
      }                                                   
                                                          
   if (digits.length == 9)  {                             
      phone.value = '(' + digits.substring(0, 3) + ') ' + 
      digits.substring(3, 6) + '-' +                      
      digits.substring(6, 9);                             
      return;                                             
      }                                                   
                                                          
   if (digits.length == 10) {                             
      phone.value = '(' + digits.substring(0, 3) + ') ' + 
      digits.substring(3, 6) + '-' +                      
      digits.substring(6, 10);                            
      }                                                   
   else                                                   
      {                                                   
      phone.value = '(' + digits;                         
      }                                                   
   }                                                      
</script>                                                 

A Validator on the form's onsubmit event.  Below is the an example ONLY to show the onsubmit.

<form name="form1" method="get"  onsubmit="javascript:return Form_OnSubmit();" id="form1" class="AName">

What and how you validate will vary greatly, and is really outside of Trail Blazer's ability to instruct.  A warning, test your validation logic - use many web browsers and try from others computers and connections.  Empty and Null values in html and Java can cause a lot of problems if not tested correctly.  A starting point might be the website www.w3schools.com, specifically  https://www.w3schools.com/js/js_validation.asp


 

Are you ready to learn more? Contact Us