how do i trigger a button with the enter key in java script?/ how to give text box and search button an ID?

Question

Sorry i know this question has been asked and answered before but i can't seem to implement it into my code. very new to programming and struggling quite a bit. Pretty simple stuff here i have a search bar and a search button. What i am trying to do is instead of having to physically click the search button to search for what i want, i would like to have the ability to be able to click the enter key which could search as well. Here is the code for the search bar and button. Easy stuff.

<div class="ui-widget"> <!-- only for css purposes-->                   
<input id="search"> <!-- for the search box-->                  
<button type="button" onclick="searchresult()">Search</button> <!-- search button-->
</div>

So at the moment when you click the search button it will activate the javascript function i have which is:

function searchresult() {   
  //find the result 
}

which in turn will find the result you want. deadly stuff. I haven't included the code which is inside the javascript function as we don't need it for this question and its quite lengthy.

so basically i want the enter key to be able to activate the searchresult javascript function the same way the search button does. I am aware that you can use jQuery keypress() Method to do this. and here is the code which can be used to do what i am wondering but i just don't know how to implement it into what i have:

$("#id_of_textbox").keyup(function(event){
  if(event.keyCode == 13){
    $("#id_of_button").click();
  }
});

I am aware of the id attribute which is used in HTML coding as well but i don't know how i would go about correctly assigning the search button and text box an id each which then i could use in the code i have just above which then in turn would allow me to use the enter key as search as well.

So if anyone could just show me how i could use the jQuery code i found to solve my question that would be brilliant. Completely open to any other suggestions about how i would go about it either. Thank you everyone for your time and attention!

Possible duplicate of [Trigger a button click with JavaScript on the Enter key in a text box](http://stackoverflow.com/questions/155188/trigger-a-button-click-with-javascript-on-the-enter-key-in-a-text-box) — Taha Paksu, Jul 14 '16 at 12:05
just wrap ur search input and button inside form tags. And it will trigger on "enter" when ur focusing an element within the form. — Joonas89, Jul 14 '16 at 12:06

Angelos Chalaris · Accepted Answer · 2016-07-14T12:15:39.560

Use the following code (explanation below):

function searchresult() {
  console.log('searching');
  //find the result 
}

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ui-widget">
  <input id="search">
  <button type="button" id="searchButton" onclick="searchresult()">Search</button>
</div>

What this does is it will hook up an event to the input box with the id search and whenver it receives a keyup (key release) event, it will check if it is the Enter key and, if so, fire the click event of the button with id searchButton (I added that id as an example). Your search button's click event is hooked up to the searchResult() function, which is in turn called from that.

If you need more information on how event handling works in jQuery, check out jQuery's Handling Events page.

Dustin Poissant · Answer 2 · 2016-07-14T12:12:16.890

You really should consider using a form.

function search_function(search_terms){
  // Do your search action here
  alert(search_terms);
};
$(function(){
  $("#search").on("submit", function(e){
    search_function($("#search_terms").val());
    e.preventDefault(); // Prevents submitting in most browsers
    return false; // Prevents submitting in some other browsers
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id='search'>
  <input type='text' id='search_terms' placeholder='Search' />
  <button>Search</button>
</form>

Or here is an example in pure JS

function search_function(search_terms){
  // Do your search action here
  alert(search_terms);
};
document.addEventListener("DOMContentLoaded", function(){
  document.getElementById("search")
  .addEventListener("submit", function(e){
    search_function(document.getElementById("search_terms").value);
    e.preventDefault(); // Prevents submitting in most browsers
    return false; // Prevents submitting in some other browsers
  });
}, false);

<form id='search'>
  <input type='text' id='search_terms' placeholder='Search' />
  <button>Search</button>
</form>

score 0 · Answer 3 · answered Jul 14 '16 at 12:04

You can assign the id to your search button :

<button type="button" onclick="searchresult()" id="search_key">Search</button>

Then you can trigger the click action on button using jQuery#trigger

JS :

$("#id_of_textbox").keyup(function(event) {
    if (event.keyCode == 13) {
        $("#search_key").trigger('click');
    }
})

score 0 · Answer 4 · answered Jul 14 '16 at 12:05

0

$('#search").change(function() {
    searchResult();
});

Don't even bother with looking for the "enter" key; just watch for the input value to change (which would happen upon pressing enter, or blurring the field).

answered Jul 14 '16 at 12:05

VoteyDisciple

37,319
5
97
97

score 0 · Answer 5 · answered Jul 14 '16 at 12:08

You can use a form and it's onsubmit event since you want enter key and submit click to do the same thing.

<form action="" method="" onsubmit="searchresult(this);">
    <input type="text" name="query" />
    <input type="submit" value="Search" />
</form>

But don't forget to use event.preventDefault() or return false.

how do i trigger a button with the enter key in java script?/ how to give text box and search button an ID?

5 Answers5