Jquery on enter/keypress not working

Question

I'm trying to create a simple search box that allows you to search based on a keyword you enter in the input field. This work fine if you press the Submit button.

I would also like to be able to press the Enter or Return key to initiate the search. I've tried using the .on function it only seems to work for click but no success on enter or keypress. Any insight would be greatly appreciate!

$(document).ready(function() {

    //$("#gallery").empty();                          
    $("#submit").on("click keypress",function (e) {
                 console.log( $( this ).text() );
                 console.log("e.which " +e.which);
                 console.log("e.type " +e.type);

             if (e.which === 13 || e.type === 'click') {     
                if($("#term").val() !="" ){
                //$("#gallery").empty();    
                /**********************/
                updatestatus();
                ajaxProcess();
                /**************************/    
                }else {
                    //$("#gallery").text("Please enter a keyword to search").fadeOut(2500);
                    alert("Please enter a keyword to search");
                }
             }
    });

    $("#clear").click(function(){
            $("#gallery").empty();                 
    });

});

HTML

<form>
<input type="text" value="" id="term" />
<input id="submit" type="button" value="Go">
<input type="reset" id="clear" value="Clear" />
</form>

Answer 1

Bind a onsubmit event handler to the form. So when you click on enter key in the input text, the form submit will trigger which will execute your ajax call.

  $("#submit").on("click keypress",function (e) {
        
            if($("#term").val() !="" ){
            /*
            updatestatus();
            ajaxProcess();
            */
            }else {
                alert("Please enter a keyword to search");
            }
});

$("#clear").click(function(){
     $("#gallery").empty();                 
});

  $("form").submit(function(e){
              $("#submit").trigger('click');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>
<input type="text" value="" id="term" />
<input id="submit" type="button" value="Go">
<input type="reset" id="clear" value="Clear" />
</form>

Or bind keypress event to the input text box and check for event.which==13 to check if its enter key and do the process.

  $("#submit").on("click keypress",function (e) {
        
            if($("#term").val() !="" ){
            /*
            updatestatus();
            ajaxProcess();
            */
            }else {
                alert("Please enter a keyword to search");
            }
});

$("#clear").click(function(){
        $("#gallery").empty();                 
});

   $("input#term").on("keypress", function(e){
  if (e.which === 13) {
      $("#submit").trigger('click');
  }
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>
<input type="text" value="" id="term" />
<input id="submit" type="button" value="Go">
<input type="reset" id="clear" value="Clear" />
</form>