Changing Enter Key Behavior In PHP/HTML FORM

cmnorton · 01-14-2009, 05:48 PM

I have a very simple form that is implemented as an html form with embedded PHP. I would like to prevent the default behavior of pressing the Enter key from triggering the submit action of the form. Is there anyway to do that?

I have a workaround, which is to have the post action of the submit call a PHP function, instead of just forwarding to another web site, but I am curious about fixing my current problem.

I cannot prevent a user from pressing CR after entering a value (money) in a text field in the form. I have used visual instructions to request that the user check a checkbox on the form that says confirm amount.

dcroxton · 01-14-2009, 09:18 PM

I can't say for certain, but I was never able to find away around this. Even if you intercept the enter key-press event, the form will still submit.

I had an idea that might work -- don't include a submit button. My theory is that the enter key actually activates the submit button (which is treated as the default button) rather than submitting the form directly. If you just put in a regular button and have it call a javascript function to submit the form, it might work -- I haven't had a chance to test it.

A more drastic solution (if that doesn't work) would be to put the input boxes on the page, but not in a form. When you're ready for the user to submit, you could transfer the values to hidden fields in a form and submit that. Another alternative along the same lines might be to have the input boxes in a form, but don't give the form an action; use javascript to assign an action to the form and submit it.

Short of that, I don't know of any way to make a browser not treat the enter key as a submit action.

vandergugten · 01-15-2009, 01:16 AM

You can prevent submittal of the form by returning false from the onsubmit() event handler.

Here is an example:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
	<title>Untitled</title>
<script language="JavaScript" type="text/javascript">
<!--
function handleSubmit()
{
	if( confirm("Do you want to submit the form data?") ) {
		return true;
	} else {
		return false;
	}
}

//-->
</script>
</head>

<body>

<form id="myform" name="myform" action="somepage.php" method="get" onsubmit="return handleSubmit();">
<input type="text" name="mytext" id="mytext" value="some text data">
<input type="button" value="Click me">
</form>

</body>
</html>

Hope this answers your question.

inanimous · 01-15-2009, 03:12 AM

personally, i wouldn't mess with default/familiar user habits/behaviors - that is UI 101.

however js user side validation is definitely the way to go, just have the form verify that everything is in place before is actually sending the data, and also prevent refreshing the page and needing to fill in the data again.

here is a nice example:

http://www.leigeber.com/2008/04/dyna...rm-validation/

with a demo: http://sandbox.leigeber.com/messages/messages.html

hope it is helpful!