CODEWITHSUNDEEP
asp.netjavascriptinternet-explorertextbox
Anders
Anders

Reputation: 12560

Enter button does not submit form (IE ONLY) ASP.NET

I have a form with a textbox and a button. IE is the only browser that will not submit the form when Enter is pressed (works in FF, Opera, Safari, Chrome, etc.). I found this javascript function to try to coax IE into behaving; but no avail:

function checkEnter(e){
    var characterCode
    if (e && e.which) {
        e = e
        characterCode = e.which
    } else {
        e = event
        characterCode = e.keyCode
    }
    if (characterCode == 13) {
        document.forms[0].submit()
        return false
    } else {
        return true
    }
}

Implementation: 

searchbox.Attributes("OnKeyUp") = "checkEnter(event)"

Any advice?

EDIT: This page on CodeProject outlines what Dillie was saying, and it works perfectly.

Upvotes: 10

Views: 17690

Answers (9)

svandragt
svandragt

Reputation: 1720

Hide the button - not using display:none, but with the following styles:

position: absolute; /* no longer takes up layout space */
visibility: hidden; /* no longer clickable / visible */

If you do this, you won't need to add any other elements or hidden inputs.

Upvotes: 1

pro
pro

Reputation: 963

This is due to a peculiarity in IE for single text field inputs.

A simple solution is to stop the page having a single text field by adding another hidden one.

<input type="text" name="hidden" style="visibility:hidden;display:none;" />

see.. https://web.archive.org/web/20210125133120/https://www.4guysfromrolla.com/articles/060805-1.aspx

Upvotes: 0

Paul
Paul

Reputation: 142

There is a good write up of this problem here, and a nice jquery based solution:

http://www.thefutureoftheweb.com/blog/submit-a-form-in-ie-with-enter

Upvotes: 3

Alec
Alec

Reputation: 9078

When using display:none, IE won't see the button and therefore won't be able to use it to submit the form. Instead, you could use z-index and absolute positioning to hide it under another element, e.g. with the style:

position:absolute; bottom: -20px; left: -20px; z-index: -1;

Now it'll still be there, usable by IE, but hidden beneath another element.

Upvotes: 1

Ross
Ross

Reputation:

Just create a text input in a hidden div on the page. This will circumvent the IE bug.

Example div:

    <!-- Fix for IE bug (One text input and submit, disables submit on pressing "Enter") -->
    <div style="display:none">
            <input type="text" name="hiddenText"/>
    </div>

Upvotes: 25

jishi
jishi

Reputation: 24604

Basically, a form needs either a button, input type="submit" or an input type="image" to enable the builtin behaviour to submit a form on enter. You shouldn't need a javascript to submit it.

Upvotes: -1

Dillie-O
Dillie-O

Reputation: 29725

The other thing I have done in the past is wrap the form area in a Panel and set the DefaultButton attribute to the submit button you have. This effectively maps the enter key to the submission as long as you have a form element in focus in the panel area.

Upvotes: 13

Corey Trager
Corey Trager

Reputation: 23123

Does it use a GET instead of a POST? Is the URL too long? I've seen that...

Upvotes: -1

TravisO
TravisO

Reputation: 9540

// Use the following Javascript in your HTML view
// put it somewhere between <head> and </head>

    <script language="JavaScript" type="text/javascript"><!--
    function KeyDownHandler(btn)
    {
      if (event.keyCode == 13)
      {
        event.returnValue=false;
        event.cancel = true;
        btn.click();
      }
    }
    // -->
    </script>

    // Put this in your TextBox(es) aka inside <asp:textbox ... >
    onkeydown="KeyDownHandler(ButtonID)"

Upvotes: 2

Related Questions