...

View Full Version : Stopping <Enter> from submitting



bradeck
04-01-2003, 09: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?

liorean
04-01-2003, 09: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.

Remember that people with javascript turned off will still submit despite the onsubmit, though.

bradeck
04-01-2003, 09: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.

Thanks!

whammy
04-02-2003, 01:23 AM
No, if you have

<form onsubmit="return false">

Nothing will submit it, even enter, unless the user has javascript disabled - in which case you'd need to use server-side checking for redunancy anyway.

bradeck
04-02-2003, 03: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.

beetle
04-02-2003, 05:51 AM
Originally posted by whammy
No, if you have

<form onsubmit="return false">

Nothing will submit it, even enter, unless the user has javascript disabled - in which case you'd need to use server-side checking for redunancy anyway. Not true. Calling the submit() method of a form does not fire the onsubmit event handler.

<input type="button" value="Submit" onclick="this.form.submit()" />

Just to throw another log on the fire ;)

liorean
04-02-2003, 07:22 AM
That's why you should use form.onsubmit() instead of form.submit()...

beetle
04-02-2003, 07:33 AM
form.onsubmit()?? Wha?

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.

liorean
04-02-2003, 07:35 AM
No...

<form onsubmit="statements">
is the same as
form.onsubmit=function(){
statements
}
as all other events are

Why else would return true|false work?

beetle
04-02-2003, 07: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

bradeck
04-02-2003, 01: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.

liorean
04-02-2003, 05: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.

brothercake
04-02-2003, 05:33 PM
Here's an example of that:


<script type="text/javascript">
<!--

function validateForm(formObj)
{
if(formObj.textbox.value!="hello")
{
alert("you didn't say hello :(");
return false;
}
else
{
alert("Hello :)");
return true;
}
}

//-->
</script>

<form onsubmit="return validateForm(this)" action="" method="get">
<input type="text" name="textbox" value="" />
<input type="submit" />
</form>

bradeck
04-02-2003, 05: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.

I have a page used multiple times - i.e. it is 100% dynamic and I have limited browser compatibilities to 6.0 and above (this is a targetted web page to ship with a product - not a website). Given that, I create a generic form on the page with few, if any, attributes. Then, when I need to set up form elements, I create them all on the fly using Javascript and then set up the calls appropriately to handle submission. Unfortunately, and despite my arguments about standards, my employer chooses to not want <ENTER> to ever work. However, submission still must work with a click of the submit button. Now, if I define the form attribute onsubmit to contain a call to my function, there is no way to return false if <ENTER> is pressed because there is no way to tell if <ENTER> was pressed. I have to stop it from functioning period. By setting up the 'return false', I tell the form nothing standard will submit this.

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?

beetle
04-02-2003, 06:19 PM
<html>
<head>

<script type="text/javascript">

function checkKey( e )
{
var kc = ( e ) ? e.which : event.keyCode;
return ( kc != 13 );
}

</script>
</head>
<body>

<form onkeypress="return checkKey()">
<input type="text" name="" />
<input type="submit" name="Submit" value="Submit" />
</form>

</body>
</html>

bradeck
04-02-2003, 06:26 PM
Thanks - I guess that's another way :)

beetle
04-02-2003, 06: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.

bradeck
04-02-2003, 06:41 PM
In this function you have 'e' as a parameter but are not passing anything in the call ????

beetle
04-02-2003, 06: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.

bradeck
04-02-2003, 06:49 PM
if another variable is passed how do you capture it then?

beetle
04-02-2003, 06:57 PM
You would have to explicitly send the event

function doWhatever( e, param2 )
{
blah blah;
}

<form onkeypress="doWhatever( event, 'someValue' )">

brothercake
04-02-2003, 07: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.

beetle
04-02-2003, 07: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.

bradeck
04-02-2003, 08: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);">
</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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum