How do I disable form submit with enter key?

Question

I have a js event on enter keypress which works fine. But after that event it also submits the form which has a submit button. How do I stop that submit button from getting focus after the previous keypress event?

EDIT: I DONT WANT THE SUBMIT BUTTON TO SUBMIT ON ENTER, ONLY ON CLICK.

Okay, so replace your submit with a button. So instead of <input type="submit".." get an <input type="button".. and attach an onclick event to it. In the onclick handler, do stuff and call the submit() method of the form. — nc3b
– nc3b, Commented Apr 30, 2010 at 18:54
I feel like this is worth repeating: I strongly discourage this kind of non-standard behavior - unless you have a very good, very specific use case where this functionality just simply must be altered. Aside from that, the answers here are correct: your keypress event handler should simply return 'false'. — anonymous coward
– anonymous coward, Commented Apr 30, 2010 at 18:57
@anonymouscoward - many embedded or terminal-like systems do not have tab keys for moving between fields. Users have been conditioned to hit ENTER after typing in data for a field to advance to the next field. I agree that this is non-optimal, but it is what it is. — StingyJack
– StingyJack, Commented Oct 15, 2014 at 13:16

Kailas Mane · Accepted Answer · 2013-06-17 11:53:18Z

8

You can do this with java script are as follows;

    <script type="text/javascript">

    function stopReloadKey(evt) {
      var evt = (evt) ? evt : ((event) ? event : null);
      var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
      if (evt.keyCode == 13)  {
          return false;
      }
    }

    document.onkeypress = stopReloadKey;

    </script>

Or Using Jquery you can do this by,

<script type="text/javascript">
        $(document).ready(function() {
           $("form").bind("keypress", function(e) {
              if (e.keyCode == 13) {
                 return false;
              }
           });
        });
</script>

answered Jun 17, 2013 at 11:53

Kailas Mane

1,9351 gold badge15 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

nc3b · Accepted Answer · 2010-04-30 18:48:34Z

4

Not sure if I understand correctly, but if you are trying to prevent the form from getting submitted:

Attach an onsubmit event and return false from it.

<form onsubmit="submit_handler();"></form>
[...]

function submit_handler()
{
    //do stuff
    return (false);
}

answered Apr 30, 2010 at 18:48

nc3b

16.4k5 gold badges53 silver badges63 bronze badges

2 Comments

Maxim Zaslavsky Over a year ago

WHat about the enter key stuff? He wants it to only submit with mouseclick, not enterkey

nc3b Over a year ago

Yeah, I commented on his question.

Jacob Mattison · Accepted Answer · 2010-04-30 18:49:22Z

2

Typically the answer to javascript questions of the type "How do I keep my form from submitting after I ...." is "make your javascript function return false".

answered Apr 30, 2010 at 18:49

Jacob Mattison

51.2k11 gold badges109 silver badges128 bronze badges

1 Comment

anonymous coward Over a year ago

This will work. Although I strongly discourage non-standard behavior - unless you have a very good, very specific use case where this functionality just simply must be altered.

ariel · Accepted Answer · 2012-04-03 11:13:30Z

0

any enter fires the submit event you need to override it - here a short example code (5 lines) how to do it http://www.bloggingdeveloper.com/post/Disable-Form-Submit-on-Enter-Key-Press.aspx

answered Apr 3, 2012 at 11:13

ariel

91 bronze badge

Collectives™ on Stack Overflow

How do I disable form submit with enter key?

4 Answers 4

Comments

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related