I have

Html:

<form  action="" method="post"  id="contactForm">
    <input id='inputbox' name="inputbox" type="text" />
    <button type="button" id='search'> search </button>
</form>

JavaScript

$(document).ready(function() {
    $("#inputbox").keyup(function(event){
        if(event.keyCode == 13){
            $("#search").click();
        }
    });

    $('#search').click(function(){
         var inputbox= $("#inputbox").val();  
        //stuff
    });
});        

inputbox value is nothing when I press enter, however if I click on button It works perfectly with same input value

maybe making inputbox global?

I have

Html:

<form  action="" method="post"  id="contactForm">
    <input id='inputbox' name="inputbox" type="text" />
    <button type="button" id='search'> search </button>
</form>

JavaScript

$(document).ready(function() {
    $("#inputbox").keyup(function(event){
        if(event.keyCode == 13){
            $("#search").click();
        }
    });

    $('#search').click(function(){
         var inputbox= $("#inputbox").val();  
        //stuff
    });
});        

inputbox value is nothing when I press enter, however if I click on button It works perfectly with same input value

maybe making inputbox global?

• javascript
• jquery

• Did you try event.which instead of event.keyCode ? Did you prevent the form from submitting! – adeneo Commented Mar 29, 2013 at 19:18
• 4 Try $("#search").trigger("click"); – Oliver Tappin Commented Mar 29, 2013 at 19:19
• @adeneo - that won't matter, jQuery has that built in. – Oliver Tappin Commented Mar 29, 2013 at 19:19
• What about $('#contactForm').submit(); – TJ Fogarty Commented Mar 29, 2013 at 19:20
• @Titanium - Nope, jQuery normalizes event.which, but not keyCode. – adeneo Commented Mar 29, 2013 at 19:28

1 Answer 1

The problem is that the enter key defaults to submitting your form, even without a submit button. So you should block the submission by changing the event binding to keypress and using event.preventDefault(), like this:

$("#inputbox").keypress(function(event){
    if(event.keyCode == 13){
        event.preventDefault();
        $("#search").click();
    }
});

Alternatively, you could use .submit() to trigger your function, change the input type to submit, and avoid separate handling for keys and clicks.

HTML:

<form action="" method="post" id="contactForm">
    <input id='inputbox' name="inputbox" type="text" />
    <input type="submit" value="Search">
</form>

JavaScript:

$(document).ready(function() {
    $("#contactForm").submit(submitSearch);
}); 

function submitSearch(event) {
     event.preventDefault();

     //do other stuff
     alert($("#inputbox").val());
}