SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Wizard
    Join Date
    Dec 2004
    Location
    USA
    Posts
    1,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    how to prevent the ENTER key from submitting form

    I am using Firefox 3 and I can not find a javascript that will prevent the "ENTER" key from submitting a form. Of course, I do server side validation but I hoped I could find a javascript way also.

    Does anyone know a of way to prevent the ENTER key from submitting a form?

    Many thanks in advance!!

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Code javascript:
    document.getElementById('myForm').onsubmit = function () {
        return false;
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,861
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by pmw57 View Post
    Code javascript:
    document.getElementById('myForm').onsubmit = function () {
        return false;
    }
    That code will prevent the form being submitted at all if JavaScript is enabled. You'd need to put whatever conditions you want to test for before the return false so that you can return true when you do want the form able to be submitted.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  4. #4
    SitePoint Member SkinnyK's Avatar
    Join Date
    Sep 2008
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I believe this resource has the information you need about JavaScript and Keyboard events, http://unixpapa.com/js/key.html The site looks ancient, but was actually published July 7th 2008.
    If you need someone to talk to, I'm always there to listen.

  5. #5
    SitePoint Wizard
    Join Date
    Dec 2004
    Location
    USA
    Posts
    1,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I appreciate the input but does anyone have any specific code? The code above doesn't work or I am implementing it wrong.

    Any specific exmaple would be most helpful - thanks again!

  6. #6
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The main question is why you want to do such a thing. It's generally not a good idea to disable or change built-in features that users are used to. Personally, I'd be annoyed if I had to reach for the mouse just to submit a form.
    Birnam wood is come to Dunsinane

  7. #7
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,861
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    If someone doesn't have a mouse then the enter key is their ONLY way to submit the form.

    I think the point is that if you attach the JavaScript form validation to the submiot handler for the form rather than the click handler for the submit button then the form will be validated regardless of how your visitor tries to submit it and there is therefore no reason to block enter from submitting.

    The only place you might consider blocking enter from submitting is from within a textarea where someone may hit enter instead of ctrl-enter when trying to go to a new line.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  8. #8
    SitePoint Wizard silver trophy kyberfabrikken's Avatar
    Join Date
    Jun 2004
    Location
    Copenhagen, Denmark
    Posts
    6,157
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    The only place you might consider blocking enter from submitting is from within a textarea where someone may hit enter instead of ctrl-enter when trying to go to a new line.
    Which browser/OS are you using? If I press enter, I get a line break - Not a submit event.

  9. #9
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,861
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by kyberfabrikken View Post
    Which browser/OS are you using? If I press enter, I get a line break - Not a submit event.

    I can't remember which browser/operating system combinations have/had that problem - just that there are or at least used to be some where that was the case (might have been Netscape 4 in which case there wouldn't be much need for it at all any more).

    All I was suggesting was that ignoring the enter key by itself in that situation (or converting it to a linefeed) is the only circumstance I could think of where it would be useful to be able to block the enter key from submitting the form. In all other circumstances blocking the enter key from submitting the form will stop some people from being able to submit the form at all.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  10. #10
    SitePoint Wizard
    Join Date
    Dec 2004
    Location
    USA
    Posts
    1,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    there's seems to be enough consternation among the experts so I will drop this requirement from my app.

    Many thanks for the clarifications and things I have not thought of before!!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •