Never been to DZone Snippets before?

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

About this user

Will Rickards http://willrickards.net/

« Newer Snippets
Older Snippets »
Showing 1-1 of 1 total  RSS 

Javascript: Preventing Form Submit When Enter is Pressed

In a web page, normally pressing enter when any form element has focus will submit the form. This is often premature. When you have a checkbox selected you probably just want to check the checkbox, not submit the form. So I wrote some javascript to translate the enter into a tab when possible (IE) and prevent the form submit when translation isn't possible (non-IE).

First is the code in your onload event handler.
This sets up onkeydown if window.event is supported (IE) and onkeypress if not.
var frmRequest = document.getElementById('frmRequest');
if (frmRequest)
   {
   if (window.event)
      frmRequest.onkeydown = frmRequest_KeyDown;
   else
      frmRequest.onkeypress = frmRequest_KeyPress;
   }


Next are the actual event handlers.
Nothing really special here, just dealing with the different ways of accessing event properties.
// ----------------------------------------------------------------------------
// frmRequest_KeyDown
//
// Description: event handler for request form key down event
//    translates returns on option buttons to a tab
//    this works only for IE, the keypress event is used for other browsers
//
// Arguments : 
//    e - the event object
//
// Dependencies : none
//
// History :
// 2006.07.13 - WSR : adapted to this project
//
function frmRequest_KeyDown( e )
   {

   var numCharCode;
   var elTarget;
   var strType;

   // get event if not passed
   if (!e) var e = window.event;

   // get character code of key pressed
   if (e.keyCode) numCharCode = e.keyCode;
   else if (e.which) numCharCode = e.which;

   // get target
   if (e.target) elTarget = e.target;
   else if (e.srcElement) elTarget = e.srcElement;
                                              
   // if form input field
   if ( elTarget.tagName.toLowerCase() == 'input' )
      {

      // get type
      strType = elTarget.getAttribute('type').toLowerCase();

      // based on type
      switch ( strType )
         {
         case 'checkbox' :
         case 'radio' :
         case 'text' :

            // if this is a return - change to tab
            if ( numCharCode == 13 )
               {
               if (e.keyCode) e.keyCode = 9;
               else if (e.which) e.which = 9;
               }

            break;
            
         }

      }

   // process default action
   return true;

   }
//
// frmRequest_KeyDown
// ----------------------------------------------------------------------------


// ----------------------------------------------------------------------------
// frmRequest_KeyPress
//
// Description: event handler for request form key press event
//    cancels returns on form elements that would prematurely submit the form
//
// Arguments : 
//    e - the event object
//
// Dependencies : none
//
// History :
// 2006.07.13 - WSR : adapted to this project
//
function frmRequest_KeyPress( e )
   {

   var numCharCode;
   var elTarget;
   var strType;

   // get event if not passed
   if (!e) var e = window.event;

   // get character code of key pressed
   if (e.keyCode) numCharCode = e.keyCode;
   else if (e.which) numCharCode = e.which;

   // get target
   if (e.target) elTarget = e.target;
   else if (e.srcElement) elTarget = e.srcElement;
                                              
   // if form input field
   if ( elTarget.tagName.toLowerCase() == 'input' )
      {

      // get type
      strType = elTarget.getAttribute('type').toLowerCase();

      // based on type
      switch ( strType )
         {
         case 'checkbox' :
         case 'radio' :
         case 'text' :

            // if this is a return
            if ( numCharCode == 13 )
               {
               // cancel event to prevent form submission
               return false;
               }

            break;
            
         }

      }

   // process default action
   return true;

   }
//
// frmRequest_KeyPress
// ----------------------------------------------------------------------------
« Newer Snippets
Older Snippets »
Showing 1-1 of 1 total  RSS