Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

PREVENT FORM TO SUBMIT WHEN ENTER KEY IS PRESSED

Posted on 2001-08-09
11
Medium Priority
?
430 Views
Last Modified: 2007-12-19
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
0
Comment
Question by:badami
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 2
  • 2
  • +2
11 Comments
 
LVL 33

Expert Comment

by:knightEknight
ID: 6369782
return false from the onSubmit:

<FORM name='myform' action='myaction.asp' method='post'
  onSubmit='return false;'>
0
 
LVL 33

Expert Comment

by:knightEknight
ID: 6369787
... and make your submit button force the issue:

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

</FORM>
0
 
LVL 2

Expert Comment

by:MCM
ID: 6369812
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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 

Author Comment

by:badami
ID: 6369961
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
 

Author Comment

by:badami
ID: 6369966
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
 

Author Comment

by:badami
ID: 6369967
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
 

Author Comment

by:badami
ID: 6369975
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
 

Author Comment

by:badami
ID: 6369979
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
 
LVL 2

Expert Comment

by:MCM
ID: 6370063
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
 
LVL 1

Accepted Solution

by:
FranzRinkleff earned 75 total points
ID: 6370135
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
 
LVL 1

Expert Comment

by:Y_ee
ID: 6370150
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

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

636 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question