Javascript: Preventing Form Submit When Enter is Pressed

Will_Rickards (Will Rickards) — Thu, 13 Jul 2006 20:48:33 GMT

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

// ----------------------------------------------------------------------------

DZone Snippets: keypress code

Javascript: Preventing Form Submit When Enter is Pressed