PREVENT FORM TO SUBMIT WHEN ENTER KEY IS PRESSED

Hi,

  Facing problems when a form gets submitted when user hits enter in a text field. How can you prevent submit when enter is pressed on a text field.

Thanks
badamiAsked:
Who is Participating?
 
FranzRinkleffConnect With a Mentor Commented:
i do not like it when i submit a form by hitting the enter key because usually i did not intend to submit
the form.  therefore, i usually disable the enter key on those form objects that result in the form
submitting when the enter key is clicked.  

i use the following javascript function.

function disableEnterKey()
{
return !(window.event && window.event.keyCode == 13);
}

in the form objects such as the input fields.  

<input type="text" name="inputField" value="xyz"
onkeypress="return disableEnterKey()">

i even disable the submit button

<input type="submit" name="submitPlanButton" value="Submit Plan" onkeypress="return disableEnterKey()">
                                 
by doing this the user will only submit the form by clicking on the submit button with the mouse.  

the enter key will still work in textareas.

not sure if you are familiar with javascript.

if not put the javascript function between your head tags.

like this with any of your other head elements

<head>
<script language="javascript">
  <!--
    function disableEnterKey()
    {
      return !(window.event && window.event.keyCode == 13);
    }
  //-->
 </script>
</head>


</head>
0
 
knightEknightCommented:
return false from the onSubmit:

<FORM name='myform' action='myaction.asp' method='post'
  onSubmit='return false;'>
0
 
knightEknightCommented:
... and make your submit button force the issue:

<INPUT type='button' value='Submit' onClick='this.form.submit();'>

</FORM>
0
Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

 
MCMCommented:
I think I've found <FORM onSubmit> to fire unreliably. I trap for the enter key in the onKeyPress event of every text box:

<INPUT type="TEXTBOX" onKeyPress="{if keyWasEnter(event) {return false;}}">

The "return false" cancels the key press and thus avoids the submission. The function called is defined below. I pass the event object around for NS, IE grabs the keypress code from the window.event.keycode (the (document.all) tests to see if the client is IE or NS pretty reliably, i think.

<SCRIPT language="javascript">
<!--
function keyPressedCode(evt)
     {
     var ret;
     if (document.all)
          {
          ret=window.event.keyCode;
          }
     else
          {
          ret=evt.which;
          };
     return ret;
     };

function keyWas(keyNum, evt) {return (keyPressedCode(evt)==keyNum);     }
function keyWasEnter(evt)      {return (keyWas(13, evt));};

//-->
</SCRIPT>
0
 
badamiAuthor Commented:
Hi MCM,

   I am using Netscape? Communicator 4.73 but this script doesn't seem to work it doesn't detect the onKeyPress

I have enabled my Javascript.

0
 
badamiAuthor Commented:
Hi MCM,

   I am using Netscape? Communicator 4.73 but this script doesn't seem to work it doesn't detect the onKeyPress

I have enabled my Javascript.

0
 
badamiAuthor Commented:
Hi MCM,

   I am using Netscape? Communicator 4.73 but this script doesn't seem to work it doesn't detect the onKeyPress

I have enabled my Javascript.

0
 
badamiAuthor Commented:
Hi MCM,

   I am using Netscape? Communicator 4.73 but this script doesn't seem to work it doesn't detect the onKeyPress

I have enabled my Javascript.

0
 
badamiAuthor Commented:
Hi MCM,

   I am using Netscape? Communicator 4.73 but this script doesn't seem to work it doesn't detect the onKeyPress

I have enabled my Javascript.

0
 
MCMCommented:
drat. I thought I had it working. try putting onkeypress in lowercase, and I'll take another look at what I'm doing to see if can spot the problem.

is this the only INPUT in the form? Netscape might always submit on enter when there is only one INPUT in the form. But I might have made that up. I'll poke around some more.
0
 
Y_eeCommented:
try this :

<html>
<head>
     <title></title>
    <script>
    var ie=Boolean(document.all);
    var ns4=Boolean(document.layers && !document.getElementById);
    var gecko=Boolean(!document.all && document.getElementById);
    keyHandler=function(e) {
        var oKey;
        if (ns4 || gecko) oKey=e.which;
        else oKey=window.event.keyCode;
        if (oKey==13) return false;
    }
   
    if (ie) document.attachEvent('onkeyup',keyHandler);
    else if (ns4) {
        document.onkeyup=keyHandler;
        document.captureEvents(Event.KEYUP);
    } else {
        document.addEventListener('keypress',keyHandler,true);
        document.focus();
    }
    </script>
</head>
<body></body>
</html>

ciao
Y
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.