the enter key forces a submit

[Ashimashi Kabashi]

hi

I have a normal html form. When I press the enter key on any field in that form it performs submit. I want that the user cannot perform submit with the "enter/return" key. Anyone?

Thanks

[Bear Bibeault]

Return false from the onsubmit handler. That way, the form can only be submitted under script control, which you can do in an onclick handler for the button that you want to use to submit the form.

[Ashimashi Kabashi]

should I use onclick or onkeypress or onsubmit.?
I am using these events on the form tag not on the submit tag because first of all I am not using a submit button, I am using a regular button for some reasons(maybe this may be the cause in the first place).

But I would appreciate sommme pseudo code. Thankyou

[Bear Bibeault]

Or, remove the submit button and submit the form under script control upon the click of a non-submit button.

Essentially, if a form has a submit button, and Enter will submit the form.

[Bear Bibeault]

Originally posted by Ashimashi Kabashi:
I am not using a submit button

If you don't have a submit button, the form will generally not submit upon Enter in a form field. Are you sure that there's no submit button?

[Bear Bibeault]

To control such submits, I generally:

1) Include an onsubmit handler for the form that returns false.

2) Include a button of type "button" that has a click handler with a call to the submit() method of the form.

[Ashimashi Kabashi]

thats exactly what I am doing.
i.e. using a normal button that explicitly submits when I want it to.

But when focus is set to any Input Box and the enter key is pressed. Bang Next Page.

I tried an onsubmit event handler on the form itself, that executes when I press enter. But after it does what its supposed to do (in my case just an alert message to see if the event is handled) it just goes to the next page despite returning false.

Should I rather try on onkeypress event handler on the form and chcek if enter is pressed and then return false?

[Bear Bibeault]

Originally posted by Ashimashi Kabashi:
it just goes to the next page despite returning false.

Something is weird about that. Please pare your example down to the smallest possible code that demonstrates the issue and post it.

Should I rather try on onkeypress event handler on the form and chcek if enter is pressed and then return false?

Please look up the expression "grasping at straws" and don't do it.

When something that is supposed to work doesn't, it's best to find out why because it will usually reveal some underlying problem that workarounds may cause to bite you in the keester later on.
[ April 03, 2008: Message edited by: Bear Bibeault ]

[Ashimashi Kabashi]

  <form name="zipform" method="post" action="regform1.php" onsubmit="checkButton()">
Enter your zip code <input type="text" id="zipcodecheck" name="zipcodecheck" size="5" maxlength="5" /><p />
                    <input type="Hidden" name="zcheck">
 
<php
if($num_rows < 684){
echo "<input type=\"button\" name=\"btncheckzip\" id=\"btncheckzip\"
 value=\"Proceed with Registration\" on click=\"checkResident()\"  /><p />";
}
else{
echo "SORRY THIS PROGRAM HAS CLOSED";
}
>
 
</form>
 
<Script type="javascript">
function checkResident(){
if(checkZipCode(document.getElementById("zipcodecheck").value)=="Y")
document.zipform.submit();

}
 
function checkButton(){
alert("hmm1");
return false;
}
 
</script>  

[ April 04, 2008: Message edited by: Bear Bibeault ]

[Ashimashi Kabashi]

anything??

[Ashimashi Kabashi]

you may ignore the php if you want. its just to display the button if it meets a condition

[Ashimashi Kabashi]

i have researched some java script examples, and have seen that this is exactly how they do it. (i.e. return false). But I am probably doing something wrong in the above code snippet

[Eric Pascarello]

Forms with one textbox will submit on enter. Try adding a second textbox and set it to be hidden.

Eric

[Bear Bibeault]

Originally posted by Eric Pascarello:
Forms with one textbox will submit on enter.

Good catch! I left that one off the list. But it doesn't explain why the return of false isn't halting the submission.
[ April 03, 2008: Message edited by: Bear Bibeault ]

[Ashimashi Kabashi]

wow thanks!
who wud have thunk?
anyway... its not working with extra hidden fields. so I had to add one extra text field

[Bear Bibeault]

Found your problem!

In the future, please be sure that you code is better formatted and show the code actually delivered to the browser without any php (or JSP) markup. That all made it hard to look through.

The problem is that you are discarding the false value returned from your submit handler!

The attribute onsubmit="checkButton()" should be onsubmit="return checkButton()". (No need for extra fields).

If you don't understand the difference let me know.

[eric - edited from return onsubmit="checkButton() to onsubmit="return checkButton()"]
[ April 03, 2008: Message edited by: Eric Pascarello ]

[Ashimashi Kabashi]

ok i will...
i dont know the diff between the two though. Could use some help.

[Bear Bibeault]

When you use the event attributes on element markup, such as the onclick attribute of the form element, it's actually syntactic sugar on creating an anonymous function to assign as the event listener.

For example, when you write:

<form id="myForm" onsubmit="doSomething()"/>    

What really happens is the equivalent of:

document.getElementById('myForm').onsubmit = function() { doSomething(); }    

Note that the script that you placed within the attribute becomes the body of the anonymous function that serves as the event listener. So placing a "return false" within the doSomething function doesn't work because that return value is discarded by the anonymous function.

By adding the return to the attribute:

<form id="myForm" onsubmit=" return doSomething()"/>    

What really happens is now the equivalent of:

document.getElementById('myForm').onsubmit = function() { return doSomething(); }    

In this case, the false value returned by doSomething is propagated as the return value of the anonymous listener, and all works as expected.

[Bear Bibeault]

Problems and nuances such as this is one of the reasons that the concept of "Unobtrusive JavaScript" is becoming more and more important as the client code within HTML pages becomes more complex.

In the same way that CSS allowed us to remove stylistic information from the HTML markup (you wouldn't even think of using the <font> tag anymore, would you?), the concept of Unobtrusive JavaScript dictates that script -- in other words, behavior -- should not be embedded in the markup either.

So the use of the event handling attributes within the element markup should be eliminated and replaced with assigning event handlers and the like in the onload handler of the page (or better yet, the document-ready handler, if using advanced JavaScript libraries such as jQuery).

That way, not only is behavior not embedded in the markup, it's easier to see what's really happening and avoid pitfalls that arise when using the shortcuts.

[Ashimashi Kabashi]

thanks... good info

[Ashimashi Kabashi]

To Bear:

i have checked out jQuery and have noticed your contributions to it.
Your book sounds awesome. I have started some of its implementations in my webpage. A couple of more days will get me going. Thanks for the great info.

[Bear Bibeault]

Originally posted by Ashimashi Kabashi:
Thanks for the great info.

My pleasure.