0

I created a search form and I set a function which tells the browser to display a JSON file whenever a string is entered on the text field and the button Search is pressed:

$("#IDofTheSearchButton").on('click', function);

I want to call the same function also whenever the input field is filled up and the user presses the Button Enter on the keyboard.

How can I do that?

        • E D I T [ S O L V E D ]- - - -

I edit the code as in the following, by exploiting the keydown event listener, and it works now:

$('#IDofTheInputField').on('keydown', function(e) {

            if (e.which == 13) {
                e.preventDefault();
                nameOfTheFunction();
            }
        } );

I also added the preventDefault() method to prevent the Enter key to activate the Submit event (otherwise, the code doesn't work for this specific key).

franz1
  • 341
  • 1
  • 5
  • 20

3 Answers3

4

By adding the 'keydown' eventlistener on the input box you will be able to call the function. The 13 stands for the 'Enter' key.

$('#inputExample').on('keydown',function(e) {
    // You could use e.which == 13, but .which has been deprecated
    if(e.key == 'Enter') {
        // You could use the .click() function below, but it is better to call the function directly.
        // $("#submitButton").click();
        someFunction();
    }
});

$('#submitButton').on('click', someFunction);

function someFunction(){
  alert("Function has been called")
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="inputExample" type="text">

<button id="submitButton" type="submit">Submit</button>
Dontwan
  • 121
  • 6
  • Bonus points for calling the method directly instead of triggering a click. – Taplar Jun 26 '19 at 11:52
  • Thank you for answering. You wrote that the 13 stands for the 'Enter' key: where may I find the whole map for the keys of the keyboard? I have not a US keyboard and the code does not work for me... – franz1 Jun 26 '19 at 12:43
  • Minor point: the submit button part could be simplified even further to `$('#submitButton').click(someFunction);` – user7290573 Jun 26 '19 at 12:55
  • 1
    @franz1, you could find the complete mapping [here](https://keycode.info/) and [here](http://gcctech.org/csc/javascript/javascript_keycodes.htm) – Dontwan Jun 26 '19 at 13:22
  • @Dontwan, the method you mentioned is the correct one but I had to add the `e.preventDefault()`. Otherwise the default event associated to the key `Enter` (submit) is activated as well and the code doesn't work... – franz1 Jun 26 '19 at 14:12
  • @franz1 This is because you may have placed the input within
    tags?
     – Dontwan Jun 26 '19 at 14:17
  • 1
    The
    tags will be useless because you are not going to send any data to a server (ajax request). [ without a
    tags appears to be valid](https://stackoverflow.com/questions/3294572/is-input-well-formed-without-a-form)
     – Dontwan Jun 26 '19 at 14:23
  • ok, thank you @Dontwan . I also used the '(e.which == 13)' instead than '(e.key == 'Enter')'. Otherwise, the code doesn't work for me – franz1 Jun 26 '19 at 14:27
0

You could use the submit jquery method. something like this 

$("#IDofTheSearchButton").submit(function);

So whenever the user has finished typing and presses enter, the function will be invoked.

Sparsh
  • 111
  • 5
0

try this. 

 $('.input').keypress(function (e) {
      if (e.which == 13) {
        $('#IDofTheSearchButton').click();
        return false;    
      }
 });
code_specimen11
  • 39
  • 2