Solved

How to Cancel a Submit when Enter Key is Press?

Posted on 2003-10-30
8
177 Views
Last Modified: 2012-05-04
I have a situation as shown in the example below .  I have a form with an action and a submit button.  For most fields on the form (e.g. input_2 below), I am happy with the behavior that the enter key will cause the form to submit.  However for some special fields (e.g. input_1 below), I want to trap the Enter key and not submit the form.

<HTML>
<head>
<script language="JavaScript">
<!--
function keyDownFx(e) {
  // Some code that traps the enter key...
  alert("keyDownFx called...");
  return false;
}
//-->
</script>
</head>
<body>
<form name="form" action="http://www.experts-exchange.com">
<input name="input_1" onkeydown="keyDownFx(event);">
<br>
<input name="input_2">
<br><input type="submit">
</form>
</body>
</HTML>

I have been testing in IE6, but I would really like a solution that is capable of running in NN4+ and IE4+.  Thanks in advance,

Marc
0
Comment
Question by:marc_rabil
8 Comments
 
LVL 16

Expert Comment

by:jaysolomon
ID: 9650542
0
 
LVL 28

Expert Comment

by:sybe
ID: 9650761
<script>
function KeyPress() {
    if (window.event.keyCode == 13) {
        window.event.keyCode = 0;
    }
}
</script>
<body onKeyPress="KeyPress();">
0
 
LVL 16

Expert Comment

by:jaysolomon
ID: 9650792
IE only sybe
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 25

Expert Comment

by:devic
ID: 9651026
hurra i am elated and have good idea ;)

====================================
<html>
<head>
<script>
// ;) devic
var isbutton=false;
function notenter()
{
      if(isbutton)return true;
      return false;
}
</script>
</head>

<body>


<form action=http://www.google.com/search onsubmit="return notenter()">
      <input type=text value=hurra name=q>
      <input type=submit onclick="isbutton=true;">
</form>

</body>
</html>
0
 

Author Comment

by:marc_rabil
ID: 9651520
Devic,

If I modify your code with another input (as below), it no longer works (on IE6 anyway). Any idea why?

<html>
<head>
<script>
// ;) devic
var isbutton=false;
function notenter()
{
     if(isbutton)return true;
     return false;
}
</script>
</head>

<body>


<form action=http://www.google.com/search onsubmit="return notenter()">
     <input type=text value=hurra name=q>
     <br><input>
     <input type=submit onclick="isbutton=true;">
</form>

</body>
</html>
0
 
LVL 25

Accepted Solution

by:
devic earned 125 total points
ID: 9651668
oops, Marc i don't understood yet why.

try this:
=====================
<html>
<head>
<script>
// ;) devic
var isbutton=false;
function notenter()
{
   // alert(isbutton)
      if(isbutton)return true;
    return false;
}
</script>
</head>

<body>


<form action=http://www.google.com/search onsubmit="return notenter()">
    <input type=text value=hurra name=q>
      <input type=text value=hurra name=b>
      <input type=text value=hurra name=c>
      <input type=text value=hurra name=d>
    <input type=submit onmouseover="isbutton=true;" onmouseout="isbutton=false;">
</form>

</body>
</html>
0
 
LVL 25

Expert Comment

by:devic
ID: 9651693
anyway i think onmouseover-out is better as onclick, because if you have some validation, you need always change isbutton=, if data is not valid
0
 
LVL 25

Expert Comment

by:devic
ID: 9663220
marc_rabil, how are you?
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
arrays and buttons with user input 2 33
Html using "Or" in condition 3 26
modify change color of text 9 35
Table header must be on top 2 27
Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
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…

756 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