DZone Snippets is a public source code repository. Easily build up your personal collection of code snippets, categorize them with tags / keywords, and share them with the world

Snippets has posted 5883 posts at DZone. View Full User Profile

Javascript IntegerBoxControl

09.12.2005
| 26358 views |
  • submit to reddit
        In input forms on web pages you often have to validate input as an integer or more precisely a positive integer greater than zero.  Here is a control implementation of sorts.

// Integer Box Control
// 
// Notes
// To create an integer box control, call the SetupIntegerBoxControl function.
// It should be passed an input element with type of text.
// The onchange event of the input element will invoke the validation function.
// The validation function ensures only positive integer data is entered.
//
// History
// 09/08/2005 - WSR : created based on dateboxcontrol

// hooks functionality up to given textbox
function SetupIntegerBoxControl( ctlIntegerBox )
   {

   // if a valid object was given
   if (ctlIntegerBox)
      {

      // validate current contents
      IntegerBoxControl_Validate( ctlIntegerBox );

      // hook up event handlers
      ctlIntegerBox.onchange = function () { IntegerBoxControl_Validate(this); };
      
      }

   }


// validates the input
function IntegerBoxControl_Validate( ctlIntegerBox )
   {

   // parse the input as an integer
   var intValue = parseInt(ctlIntegerBox.value, 10);

   // if this is not an integer
   if (isNaN(intValue))
      {

      // clear text box
      ctlIntegerBox.value = '';

      }
   // if this is an integer
   else
      {
   
      switch (true)
         {
         case (intValue == 0) :

            // clear text box
            ctlIntegerBox.value = '';

            break;
         case (intValue > 0) :

            // put the parsed integer value in the text box
            ctlIntegerBox.value = intValue.toString();

            break;
         case (intValue < 0) :

            // put the positive parsed integer value in the text box
            ctlIntegerBox.value = (-1 * intValue).toString();

            break;
         }
      
      }

   }

I forgot to mention before how to hook it up in code.
I usually add an attribute bvr-datatype="integer" to the input element.  bvr stands for behaviour.  I hook up the control in the onload event.  Here is a recent example.
// set window load event handler
window.onload = window_load;

// ----------------------------------------------------------------------------
// window_load
// Description: event handler for window load event
// Arguments: none
// Dependencies:
//    SetupDateBoxControl (dateboxcontrol.js)
//    SetupIntegerBoxControl (integerboxcontrol.js)
//    frmSearch_submit
//    cmdRequesting_click
//    txtRequesting_change
//    frmRecent_submit
//
function window_load()
   {

   // get input elements in document
   var arrInputs = document.getElementsByTagName('INPUT');

   // cycle through input elements
   for ( var i = 0; i < arrInputs.length; i++ ) 
      {

      // if this is a datebox control
      if ( 'date' == arrInputs[i].getAttribute('bvr-datatype') && 'text' == arrInputs[i].getAttribute('type') )
         {

         // setup the control
         SetupDateBoxControl( arrInputs[i] );

         }

      // if this is a integerbox control
      if ( 'integer' == arrInputs[i].getAttribute('bvr-datatype') && 'text' == arrInputs[i].getAttribute('type') )
         {

         // setup the control
         SetupIntegerBoxControl( arrInputs[i] );

         }

      }

   // get reference to search form
   var elForm = document.getElementById('frmSearch');
   if (elForm)
      {

      // set submit event handler
      elForm.onsubmit = frmSearch_submit;

      // set cmdTimekeeperLookup click event handler
      var elToWire = document.getElementById('cmdTimekeeperLookup');
      if (elToWire)
         {

         elToWire.onclick = cmdRequesting_click;
         elToWire.textbox = document.getElementById('txtRequestingTimekeeper');

         // set textbox change events
         if (elToWire.textbox)
            {

            elToWire.textbox.onchange = txtRequesting_change;
            elToWire.textbox.onblur = txtRequesting_change;
            elToWire.textbox.label = document.getElementById('lblTimekeeperName');

            if ( typeof window.strRequesting == 'undefined' )
               window.strRequesting = ''; 

            }

         }

      }

   // get reference to recent form
   elForm = document.getElementById('frmRecent');
   if (elForm)
      {

      // set submit event handler
      elForm.onsubmit = frmRecent_submit;

      }

   }
//
// window_load
// ----------------------------------------------------------------------------