Prevent Users from submitting form by hitting enter #2

Question

Well in a previous question I asked the same thing, but the answer that i doesn't prevent a submit when the user is in a text-box.

So basically what i need is the ability to keep a person from submitting a form unless the explicitly click the submit button.

edit:

basically the main reason for doing this is that this is an employer survey. the people on this won't be the most technically savvy, and the client i'm making this for has requested this.

Answer 1

you could have the button you want to be the submission:

1. disable itself
2. set the action on the form
3. submit the form
4. clear the action on the form

any other presses of Enter and whatnot wouldn't work, because the form has no action.

Answer 2

$('input').keydown(function(e){
 return e.keyCode !== 13;
});

... I don't recommend doing this, by the way.

Answer 3

Why do you need to do this?

Submitting a form by hitting enter is standard expected behavior on a web form.

If you are trying to make sure they don't accidentally submit the form before they have filled in or selected all the options, use a validation javascript function that checks for entries in all the fields on the form. If there is something missing, pop up an alert box telling them what is missing and return false. (add the onsubmit='myValidateForm();' option to the form tag)

If all the required data is filled in, there should be no problem with allowing the form to be submitted with enter as well as clicking the button.

Ron

Answer 4

I recommend using an onsubmit handler that prevents the form to be submitted (return false) and then use javascript to submit the form when the button is clicked.

<form action="accion.htm" onsubmit="return false;">
    <input type="text" name="pepe" />
    <a onclick="this.parentNode.submit();" href="javascript:;">submit</a>
</form>

Please note that this is just an example, the event handlers should not be added inline and the this.parentNode.Submit() only works if the <a> is a direct child of the form.

Answer 5

if a form has one input of type text, and the user hits enter in that input, the form will be submitted, per HTML 4 spec. the easiest way to prevent that from happening, is to add another hidden text input

Answer 6

i set the form to onsubmit="return false" and did this

<input type="button" value="Submit" onClick="document.Survey.submit()" style="font-size: 1.25em;">

Answer 7

look at the answers on this question. much more useful!

Answer 8

I agree philosophically with the posters who say, "Why do you want to do this?" But I also have someone asking me for this behavior, so I'm in the same boat as you.

I've used Thirster42's solution before, but that only works for me when it's a GET, not a POST. It also seems to be browser-specific -- Firefox won't submit the form when the user hits enter in a textbox, but Safari will. (Firefox 3.5.3, Safari 4.0.3, MacOSX)

Most of what I've seen on the web looks like this: "Q: How do I do this? A: Basically, you don't." I believe this is because the behavior is inconsistent across platforms and web browsers, and what works for Firefox might not work for IE or Opera. Also, you can't rely on javascript if the user has disabled it in the browser.

All that being said, here's what I did that seems to work, borrowing from here and various other places. Tested in Firefox, Safari, and IE 8. JavaScript for header:

function disableEnterKey(e)
{
   var key;
   if(window.event)
      key = window.event.keyCode;     // IE 
   else
      key = e.which;     // Firefox
   if(key == 13)
      return false;
   else
      return true;
 }

And then on each input field:

:onKeyDown "return disableEnterKey(event);"

I don't like it so much, but if it makes people happy...