Prevent Users from submitting form by hitting enter

Question

Well I have a survey on a website, and there seems to be some issues with the users hitting enter (i don't know why) and accidentally submitting the survey (form) without clicking the submit button. Is there a way to prevent this? I'm using html, php 5.2.9, and jquery, on the survey.

Answer 1

Let the users press enter if they want to. I think this topic may provide assistance: http://stackoverflow.com/questions/795132/how-can-php-determine-if-user-pressed-enter-key-or-submit-button

Answer 2

You could make a javascript method to check to see if the enter key was hit, and if it is, to stop the submit.

<script type="text/javascript">
  function noenter() {
  return !(window.event && window.event.keyCode == 13); }
</script>

Just call that on the submit method.

Answer 3

You can use a method such as

$(document).ready(function() {
  $(window).keydown(function(event){
    if(event.keyCode == 13) {
      event.preventDefault();
      return false;
    }
  });
}

In reading the comments on the OP, to make it more usable and allow people to press enter if they have completed all the fields

function validationFunction() {
  $('input').each(function() {
    ...

  }
  if(good) {
    return true;
  } 
  return false;
}

$(document).ready(function() {
  $(window).keydown(function(event){
    if( (event.keyCode == 13) && (validationFunction() == false) ) {
      event.preventDefault();
      return false;
    }
  });
}

Answer 4

Instead of preventing users from clicking Enter, which may seem unnatural, you can leave the form as is and add some extra client-side validation: when the survey is not finished the result is not sent to the server and user gets a nice message telling what needs to be finished to complete the form. If you are using jquery, try the Validation plugin:

http://docs.jquery.com/Plugins/Validation

This will require more work than catching the Enter button, but surely it will provide a richer user experience.

Answer 5

This has worked for me in all browsers after much frustration with other solutions. The name_space outer function is just to stay away from declaring globals, something I also recommend.

$(function() {window.name_space = new name_space();}); //jquery doc ready
function name_space() {
    this.is_ie = (navigator.userAgent.indexOf("MSIE") !== -1);

    this.stifle = function(event) {
        event.cancelBubble;
        event.returnValue = false;
        if(this.is_ie === false) {
            event.preventDefault();
        }
        return false;
    }

    this.on_enter = function(func) {
        function catch_key(e) {
            var enter = 13;
            if(!e) {
                var e = event;
            }
            keynum = GetKeyNum(e);
            if (keynum === enter) {
                if(func !== undefined && func !== null) {
                    func();
                }
                return name_space.stifle(e);
            }
            return true; // submit
        }

        if (window.Event) {
            window.captureEvents(Event.KEYDOWN);
            window.onkeydown = catch_key;
        }
        else {
            document.onkeydown = catch_key;
        }

        if(name_space.is_ie === false) {
            document.onkeypress = catch_key;    
        }
    }
}

Sample use:

$(function() {
    name_space.on_enter(
        function () {alert('hola!');}
    );
});

Answer 6

If you don't have a textarea in your form, then just add the following to your <form>:

<form onkeypress="return event.keyCode != 13;">

This will cause that every key press inside the form will be checked on the keyCode. If it is not 13 (the Enter key), then it will return true and anything will go as expected. If it is 13 (the Enter key), then it will return false and anything will stop immediately, so the form won't be submitted.

If you have a textarea in your form (which of course should accept the Enter key), then add the keypress functions to every separate input element which shouldn't submit the form on pressing of the Enter key, e.g. <input> and <select>. You can do this with jQuery as well:

$('input,select').keypress(function() { return event.keyCode != 13; });

Answer 7

I would avoid any client side validation as that could be easily turned off, and forcing users to have javascript enabled is just silly.

Just do some server side validation based on your required fields in your app/survey. You may want to check the TABINDEX attribute of your inputs, perhaps tabbing from the first field is giving focus to the submit button.

Disabling buttons or not allowing them is horrible for usability.