View Full Version : Stopping <Enter> from submitting
04-01-2003, 08:06 PM
I have a form in which I have overriden the onSubmit to be 'return false'. I did this in hopes of stopping submission 100% of the time. Then, the specific button/link I want to submit handles the onClick event handler and all is well. This works great except that <Enter> still submits - as if the onClick gets handled since the button is a default 'submit' type. It only does this when in an edit field - when I am, press enter and the form submits. HELP?
04-01-2003, 08:24 PM
Move whatever you have in the onclick of the submit button to the onsubmit of the forms, and it should work just fine.
04-01-2003, 08:59 PM
Then I would get the submission no matter what - I am trying to eliminate it. All the code works otehrwise.
It turns out if I do not have a 'submit' type input field the onClick will not be called for submission. I just change the type to 'button' and everything is working as desired.
04-02-2003, 12:23 AM
No, if you have
<form onsubmit="return false">
04-02-2003, 02:50 AM
That's what I thought - until it acted otherwise. Even if I have the onSubmit="return false" statement. What it seems is happening (in IE6 anyway) is if I define a submit button (an input with a type of 'submit' and handle the onClick event, the onclick event will get called if I am in an edit field and press enter. When I simply changed the type to 'button' the call did not happen anymore.
04-02-2003, 04:51 AM
Originally posted by whammy
No, if you have
<form onsubmit="return false">
<input type="button" value="Submit" onclick="this.form.submit()" />
Just to throw another log on the fire ;)
04-02-2003, 06:22 AM
That's why you should use form.onsubmit() instead of form.submit()...
04-02-2003, 06:33 AM
do you mean
form.onsubmit = functionPointer;
That doesn't work anyway. There's really no difference between the HTML assigned and script-assigned event handlers. The submit() method for forms just plain doesn't fire onsubmit.
04-02-2003, 06:35 AM
is the same as
as all other events are
Why else would return true|false work?
04-02-2003, 06:39 AM
my bad, I thought your "that's why" comment was for me, not bradeck. How arrogant of me :rolleyes:
Carry-on, fellas :D
04-02-2003, 12:59 PM
OK - so going bak - we all agree on syntax and what SHOULD happen. What I am saying is (and agreeing) that while <form onsubmit="return false"> causes the form submission to fail, if I have an onclick() event in a submit button (i.e. <input type="submit"> it *will* get called for <enter> on a text field. We all know there is limited use for a form that won't submit - what I am doing (for reasons which are deep but clear) is setting the forms properties (action, target, etc) dynamically in the function called in the onclick and then calling submit. The prob is that if the input type is 'submit' - the onclick() handler gets called for <enter> on any text field - THAT seems odd to me. When I simply changed the input type to 'button' all my issues went away.
04-02-2003, 04:27 PM
Well, the thing is, you don't put onsubmit="return false;" in your form tag - you put onsubmit="return fnValidateForm(this);" in it.
fnValidateForm then returns true or false depending on whether the form is filled out as you you want it or not.
04-02-2003, 04:33 PM
Here's an example of that:
alert("you didn't say hello :(");
<form onsubmit="return validateForm(this)" action="" method="get">
<input type="text" name="textbox" value="" />
<input type="submit" />
04-02-2003, 04:52 PM
OK - let's start completely over so you get a hint of what I have to do - as you will see - doing anything in onsubmit will not resolve the issue.
However, the exception seems to be if I have a submit button (of type 'submit') with an onclick handler. In that case, the function gets called on <ENTER> in a text box. THIS IS WHAT SURPRISED ME. If I change the type to 'button' I no longer get the call on <ENTER> and only get it onclick - which is all I need.
Does that clarify?
04-02-2003, 05:19 PM
function checkKey( e )
var kc = ( e ) ? e.which : event.keyCode;
return ( kc != 13 );
<form onkeypress="return checkKey()">
<input type="text" name="" />
<input type="submit" name="Submit" value="Submit" />
04-02-2003, 05:26 PM
Thanks - I guess that's another way :)
04-02-2003, 05:29 PM
As far as I'm concerned, it's the only way. Cuts right to the point. If you want to stop the Enter key from submitting a form, you listen for that Enter key on the form and cancel it.
04-02-2003, 05:41 PM
In this function you have 'e' as a parameter but are not passing anything in the call ????
04-02-2003, 05:43 PM
In Gecko, event-trigged functions are automatically passed the event as an argument. I capture it with the variable 'e'. IE relies on accessing the global event object.
04-02-2003, 05:49 PM
if another variable is passed how do you capture it then?
04-02-2003, 05:57 PM
You would have to explicitly send the event
function doWhatever( e, param2 )
<form onkeypress="doWhatever( event, 'someValue' )">
04-02-2003, 06:00 PM
The reason for the behavior you noticed is that pressing enter to submit a form only works if the form has a real "submit" button; if you just use <input type="button" then enter won't submit it; as you've noticed.
04-02-2003, 06:08 PM
Right bcake, I should have mentioned that. In fact, if you look, once a form or any of it's childNodes receive focus, if a real submit button is present, it receives a visual highlight, typically a border-change.
04-02-2003, 07:40 PM
I almost feel like I should just give this up since it is working under a different solution.
However, this is where I am at...
<form name="frmMain" method="POST" onSubmit="return false" onKeyPress="return event.keyCode != 13">
<!-- text boxes here -->
<input type="submit" onClick="return ValidateConfigAndBuildForm(this.form);">
In this scenario, all is well in IE, but the onclick handler still gets called in NS. Either way, no submission will happen now.