6

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.

DForck42
  • 19,789
  • 13
  • 59
  • 84
  • do you mean –  May 28 '09 at 23:25
  • no i mean a text box. also, with the code from the previous question, it didn't prevent them from hitting enter when they had a radio button selected either. – DForck42 May 29 '09 at 13:37

6 Answers6

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

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

James
  • 109,676
  • 31
  • 162
  • 175
  • http://stackoverflow.com/questions/895171/prevent-users-from-submitting-form-by-hitting-enter/895231#895231 is the original question, seems like that doesn't solve his problem. –  May 28 '09 at 23:45
5

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;">
DForck42
  • 19,789
  • 13
  • 59
  • 84
1

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.

Javier
  • 148
  • 10
0

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...

Michael H.
  • 862
  • 1
  • 7
  • 14
  • i tried something like that before, but it didn't seem to want to work for me (i couldn't get the code to work, or it was bad code. i don't know the ins and outs of javascript). Also, with your implementation i'd have to put it on every input field. my survey has probably about 300 that i'd have to put that on. It also relies on javascript so that aspect doesn't really change. – DForck42 Oct 26 '09 at 16:19
  • I agree, I'm not happy about the Javascript-reliance. From what I could tell, there's no reliable way to do it cross-browser otherwise. As far as "put it on every input field" ... are you hand-coding these fields, or doing it programmatically? Even if you're writing the text for the input fields by hand, it's not such a bad burden. Just one bit of javascript up top, and use string replace to add 43 characters to the end of each of your input fields... – Michael H. Oct 26 '09 at 23:41
0

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 Savage
  • 10,923
  • 4
  • 26
  • 35
  • what if you have two logical forms in one
    . the user wont even know they are separate. this is often necessary when you need your page to work with javascript disabled
    – Simon_Weaver Sep 14 '09 at 01:08
0

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

mkoryak
  • 57,086
  • 61
  • 201
  • 257