HTML form with single text field + preventing postback in Internet Explorer

Question

I have noticed a rather strange behaviour in IE.

I have a HTML form with a single input text field and a submit button

On Submit click I need to execute a client side JavaScript function that does the necessary.

Now when I want to prevent the postback in the text field (on enter key press)

I have added a key press JavaScript function that looks like this:

---

<input type=text onkeypress="return OnEnterKeyPress(event)" />

 function OnEnterKeyPress(event) {
            var keyNum = 0;
            if (window.event) // IE
            {
                keyNum = event.keyCode;
            }
            else if (event.which) // Netscape/Firefox/Opera
            {
                keyNum = event.which;
            }
            else return true;  
            if (keyNum == 13) // Enter Key pressed, then start search, else do nothing.
            {
                OnButtonClick();
                return false;
            }
            else
                return true;
        }

Strangly this doesn't work.

---

But if I pass the text field to the function :

<input type=text onkeypress="return OnEnterKeyPress(this,event);" />

 function OnEnterKeyPress(thisForm,event) {
            var keyNum = 0;
            if (window.event) // IE
            {
                keyNum = event.keyCode;
            }
            else if (event.which) // Netscape/Firefox/Opera
            {
                keyNum = event.which;
            }
            else return true;  
            if (keyNum == 13) // Enter Key pressed, then start search, else do nothing.
            {
                OnButtonClick();
                return false;
            }
            else
                return true;
        }

I am able to prevent the postback.

Can anyone confirm what is exactly happening here??

the HTML form has just one text box and a submit button

The resultant o/p of the JavaScript function executed on submit is displayed in a HTML text area in a separate div.

Answer 1

Return false in the onsubmit which is used to submit the form via javascript.

Answer 2

There must be some interaction with other code you haven't posted. Your code stops the form submission for me in both variants and there is no reason it shouldn't.

But trapping Enter keypresses is difficult to do properly and is likely to annoy as much as anything else. There is almost always a better way.

For example, as altCognito suggests, have ‘form.onsubmit’ return false so the form never submits in response to user interaction. Also, if you put your AJAX code (assuming that's what you're doing) in the onsubmit handler instead of onclick on a button, you can also make it so that pressing Enter has the same effect as clicking on the submit button, which the user might normally expect.

If you don't want that, there seems to be no reason to include the <form> element at all. It's perfectly valid to just have input elements sitting on their own, if you never expect the browser to submit them anywhere.

Answer 3

Found out a work around for this issue.

i just found out that in IE, if,in a form, there is just one text field and one submit button, pressing enter results in form submit. However if there are more than one text boxes, IE doesn't auto postback the form on enter press instead it fires the button's onclick event.

So i introduce a hidden text field in the form and everything works magically. I donot even need to handle the onkeypress event for the text field.

<Form>
    <input type="text" />
    <input type="text" style="display:none"/>
    <input type="submit" onClick="callPageMethod();return false;"/>
</Form>

This works perfectly for me!!

This is not an issue in FF, as pressing enter directly results in call to submit button's onclick event.

Answer 4

Have just come here because of a related observation with at least IE 7 and 8:

If there is only one text input and one submit button on a form and the user presses return key, IE will not include the submit button's name/value-pair in the request. Insead, only the text input's value will be there.

If I add another text input, both text inputs and the submit button's parameters are posted. The second text input can even be hidden: <input type="text" style="display:none"/>

So this is not related to events but rather to simple form submission.

It happens with GET and POST. Adding a select element to the form does not change the behavior. -- very strange.

Answer 5

Hi you can also disable the default behavior.

jQuery('#yourInput').keydown(function (e) {
  if (e.keyCode == 13) {
    e.preventDefault();
  }
});

Cheers!