Greetings!
If a user presses the ENTER key while in a form, the form’s submitted. Is there a standard approach / way to trap that so that, for example, the form would only be submitted by a mouse click on the submit button?
TIA,
Bill
I should have said "a standard Rails approach".
Must say this is an odd request. It drives me absolutely nuts when enter does NOT submit the form and I'm forced to reach for my mouse.
That said, it's simple: don't add a submit button (input type="submit"). Use a link that uses javascript to submit the form.
Jason
For the button, do not use type="submit" attribute, instead use type="button", and a on click handler. So, your button markup will look something like below <input type="button" name="mybutton" value="Submit" onclick="document.forms[0].submit()"/>
I'm just thinking that a single line form will submit on the Enter button, even if there is no submit button, if this is the case and you don't want to submit the form at all you could add some javascript like this (assuming you are including prototype) :
$('id-of-form').observe('submit', function(e) { e.stop(); }.bindAsEventListener(this)); // Untested
alternatively, if you still want the form to be submitted if/when a submit button is pressed maybe something like:
$('id-of-form').observe('submit', function(e) { e.keyCode == Event.KEY_ENTER ? e.stop() : null; }.bindAsEventListener(this)); // Untested
Simon
for the record... the type of submit button isn't going to change this
behavior. the _presence_ of a submit button doesn't even change it.
outside of using js (to either trap keys or return false or whatever
approach you'd use), i don't think you can do it. but you'd have to be
catching the return and perhaps comparing "this" to verify which
element is sending the "click". not sure how much you wanted a
purely-js solution so i'm not spending lots of cycles processing it.
but it definitely could be done with js. hth
RSL
attaching a little html for anyone who wants to verify my claim that a button-less form can still submit from hitting enter inside a form input [text].
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Submittable Buttonless Form</title> </head> <body> <form action="foo"> <p> <input type="text"> </p> </form> </body> </html>
RSL
And as a counter point, I present this form, which does *not* submit on enter
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Submittable Buttonless Form</title> </head> <body> <form action="foo" method="post"> <div> <input type="text" id="login" name="login"/> </div>
<div> <input type="password" name="password" name="login"/> </div> </form> </body> </html>
And this one, that does
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Submittable Buttonless Form</title> </head> <body> <form action="foo" method="post"> <div> <input type="text" id="login" name="login"/> </div>
<div> <input type="password" name="password" name="login"/> </div>
<div> <input type="submit"/> </div> </form> </body> </html>
So yeah, there's a combination of form fields that will not submit on Enter. Sometimes it will work, sometimes it won't. If you want it to work all the time, put in a submit tag. If you don't want it to happen ever, you probably need extra javascript just to be safe.
Jason
Bah, I did accidentally name both elements the same thing, however, having them named right (name="password") doesn't change anything, the form still doesn't submit on enter.
Jason
what the heck. that is weird. is it perhaps the method="post"? what's
going on here where you and i can make really similar HTML that reacts
completely differently? curiouser and curiouser.
RSL
Set up an onsubmit handler for the form that returns false unless some
value is true.
Configure the submit button to set that value to true and then submit
the form.
-philip
The simplest way is pass this code to your form 
<input type="text" style="display:none">
Easy and clean, thanks you
If you want/need to prevent "enter" from submitting a form, you are doing it wrong and you could be be alienating some disabled people who do not use a mouse and rely on their keyboard. I know even if that's not the case, if I ran into a site that prevented me from pressing enter to submit a form (because I am still a tab, tab, enter person) I would walk away from that site and probably blacklist it in my personal DNS.
Jordon Bedwell wrote in post #1084597:
Easy and clean, thanks you
If you want/need to prevent "enter" from submitting a form, you are doing it wrong and you could be be alienating some disabled people who do not use a mouse and rely on their keyboard. I know even if that's not the case, if I ran into a site that prevented me from pressing enter to submit a form (because I am still a tab, tab, enter person) I would walk away from that site and probably blacklist it in my personal DNS.
Hello, My problem is than I'm doing a excel style form, and some fields have remote calls (onchange) to calculate another fields. And the form has a submit button, so I user press enter the remote call (ajax call) is not finished (some times not initiated) when the form is submited and saved with bad calculated values. To solve it, I have to do two things: 1 - Prevent enter key (this forum issue) 2 - And,despite this, user can click on submit button faster than field onchange function is finished. This second issue i still don't know how to solve it
What do you tink? Do you hace the pont 2 answer?
thanks a lot and sorry for my bad english
Albert
Your English is guaranteed 100% better than my attempt at your native language, unless that's Latin (didn't think it was).
What you need to do is use callback functions in your processing JavaScript to disable the submit button while they're running, and enable them when they're done. That way if you have blocked the enter key, the only way the form will be submitted is with a click on an enabled form button. Here's a quick mockup (I don't know what your existing cell calculation code looks like).
//stop all submits from the form $$('form').invoke('observe', 'submit', function(evt){ evt.stop(); });
//let a click on <input type="submit" id="real_submit" /> send the form $('real_submit').observe('click', function(evt){ this.form.submit(); });
//fake spreadsheet code for demo purposes $$('input[type="text"]').invoke('observe', 'blur', function(evt){ var elm = evt.element(); var submits = elm.select('input[type="submit"]'); new Ajax.Request('/some/endpoint', { parameters: {id: elm.id, value: $F(elm)}, onCreate: function(){ submits.invoke('disable'); }, //can't be clicked onSuccess: function(transport){ submits.invoke('enable'); //can be clicked $('total').update(transport.responseText); } }); });
That's all written with Prototype.js methods, but you could do similar in any JavaScript you like.
Walter
I don't know my english but my javascript is very newbie, too much newbie
¿ Is not this, the same or similar, that disable the sumbmit button at the begining of onchange event and activate it at the end?...something like:
<%= f.text_field :amount, onchange=>"disable_submit();" + remote_function(...my caculations) +"enable_submit();" ) %></p>
where enable_submit() and disbale_submit() just does what says, activate and deactivate the submit button
isn't it?
Thanks,
Albert
Thanks for that Adam, helped me a lot.
