IE8 - Enter key won't submit my search field.

Question

Hey guys, I have a search field that is not submitting when the enter key is hit, this issue is only happening on IE8, every other browser is working just fine (even IE6). Please guys I need a hand with his, find below the code I have for it.

<div class="box-search">
                <input type="text" class="text-box" id="text-search" />
                <label class="overlabel" for="text-search">Enter keyword(s)</label>
                <input type="submit" value="" name="btn-submit" class="btn-go" onclick="javascript:goSearch();return false;" />
</div>

Ok I forgot to mention this form is in a ASP coded page, that's why it is not wrapped inside the form element.

Answer 1

Would it be anything to do with the fact you have an onclick event with a function call to GoSearch and a return false attached to a 'submit' input type?

Can you past the contents of the goSearch() function?

Answer 2

You need to put some <form></form> tags around the textbox and button. Like so

<form method='POST' onsubmit='javascript:goSearch();return false;'> 
            <input type="text" class="text-box" id="text-search" />       
            <label class="overlabel" for="text-search">Enter keyword(s)</label>       
            <input type="button" value="" name="btn-submit" class="btn-go" onclick="javascript:goSearch();return false;" />
</form>

Another way would be to use the keydown event on the textbox and check whether it was the enter key.

Hope this helps.

Answer 3

What happens if you remove the "return false;" from the event handler for the submit? When a user hits ENTER in a text input field, IE behaves as if the submit button had been used but the "false" prevents the event bubbling.

EDIT: with new ASP information.

See this: http://mikepope.com/blog/AddComment.aspx?blogid=309 He has an explanation of how it works so no details here, except to say that all you need to do is add the following to your page_load event:

Page.RegisterHiddenField("__EVENTTARGET", "MyDefaultButton");

Answer 4

Another way, instead of the onclick on the submit button, would be to do this.

<form action="script.php" method="post" onsubmit="goSearch();return false">
<div class="box-search">
    <input type="text" class="text-box" id="text-search" />
    <label class="overlabel" for="text-search">Enter keyword(s)</label>
    <input type="submit" value="" name="btn-submit" class="btn-go" />
</div>
</form>

Edit: Added action and method attributes. The action attribute is required for validation.

Answer 5

I have found there to be a bug in IE8 and sometimes a form won't submit on enter key.

The best way would be to set an event to handle enter being pressed.

In jQuery you would do:

$("input_box_id").keydown(function(e){

     if (e.keyCode == 13) //enter
     {
         $("btn-submit").click();
     }
});

In JavaScript it would be:

document.getElementById("input_box_id").onclick = function(e){

   var keycode =(window.event) ? event.keyCode : e.keyCode;

   if (keycode == 13) //enter
   {
      document.getElementById("input_box_id").click();
   }

};

And change Html to:

<form action="url_here" method="post">
<div class="box-search">
    <input type="text" class="text-box" id="text-search" />
    <label class="overlabel" for="text-search">Enter keyword(s)</label>
    <input type="submit" value="" id="btn-submit" name="btn-submit" class="btn-go" />
</div>
</form>

Ignore the form tags if you've already got a Asp.net form.