ajax, javascript - start function with two events

Question

I have one function and I need to start in on click or on pressing Enter key. So I'd need something like:

<BUTTON onclick="searchProduct()" or onkeypress="searchProduct()">Hledat</BUTTON>

But only on pressing Enter. Not on any key.

Is this possible for Ajax or plain javascript?

OK, didn't expect that it is so complicated, so I give you whole of my code, because your answers are not working for my whole code...

<!DOCTYPE html>
<HTML>
    <HEAD>
        <META charset="UTF-8" />
        <TITLE>Searchin engine</TITLE>
    </HEAD>
    <BODY>
        <SCRIPT src="js_search.js"></SCRIPT>
        <FORM>
            <INPUT type="text" id="word" size="40" />
        </FORM>
         <BUTTON onclick="searchProduct(document.getElementById('word').value)">Hledat</BUTTON>
        <P id="display"></P>

    </BODY>
</HTML>

Possible duplicate of [keydown + keyup events for specific keys](http://stackoverflow.com/questions/16345870/keydown-keyup-events-for-specific-keys) — Marie, Mar 23 '16 at 12:04
Most browsers probably perform onclick when you tab and enter — jayms, Mar 23 '16 at 12:05
Assuming that you also have some kind of text input for your search term, you should make the text field react to Enter rather than the button — jayms, Mar 23 '16 at 12:17

jonny · Answer 1 · 2016-03-24T09:57:29.683

2

Just add event listeners in your javascript (above your searchProduct() function, for instance)

document.getElementById('button').addEventListener('click', function(){
  searchProduct(document.getElementById('word').value);
})

document.getElementById('button').addEventListener('keydown', function(e){
  if(e.keyCode == 13) searchProduct(document.getElementById('word').value); // the keyCode 13 is equivalent to the enter key
})

function searchProduct(val) {
  alert(val);
}

<button id="button">Hledat</button>
<input id="word" value="foo"/>

Hope this helps!

edited Mar 24 '16 at 09:57

answered Mar 23 '16 at 12:03

jonny

3,022
1
17
30

Hi, it looks nice, but how to do this if I need to work with variable? – Michal Vlasák Mar 23 '16 at 19:13
Work with variables in what way? – jonny Mar 24 '16 at 09:04
I need to take the value from INPUT with id "word" and get it in the function searchProduct(). But if it is no event in element BUTTON, I'm not able to do this. – Michal Vlasák Mar 24 '16 at 09:33
@MichalVlasák I've changed my code to reflect what you want. That should work for you :) – jonny Mar 24 '16 at 09:57
Thank, but if I press Enter the page is reloading, maybe runs the script and the input is cleared and nothing else happens. I tried it in Firefox and also in Google Chrome. – Michal Vlasák Mar 24 '16 at 20:46

score 1 · Answer 2 · answered Mar 23 '16 at 12:18

Ideally, you should have individual events on element and enter, you can either call specific function or you can trigger element's click.

If you wish enter and button click work same, I would suggest to trigger click event. This will make sure all UI states are updated and all processing are done. Reason for this is, we can add multiple handlers to a button for different processing and calling functions might not call other code.

function keyPress(e) {
  if (e.keyCode == 13) {
    document.getElementById("btn").click();
  }
}

function notify() {
  console.log("Processing...")
}

<input type="text" id="txt" onkeyup="keyPress(event)">
<button id="btn" onclick="notify(event)">Notify</button>

score 0 · Answer 3 · answered Mar 23 '16 at 12:04

You can do:

<BUTTON onclick="searchProduct()"  onkeypress="searchProductKeyPress(event)">Hledat</BUTTON>

function searchProductKeyPress(event) {
    if (event.which == 13 || event.keyCode == 13) {
        searchProduct();
        return false;
    }
    return true;
}

score 0 · Answer 4 · answered Mar 23 '16 at 12:06

In the function you can pass the event like this:

<BUTTON onclick="searchProduct(event)" onkeypress="searchProduct(event)">Hledat</BUTTON>

Now in the function:

searchProduct(e){

    if(e.type === 'keypress' && e.keyCode !== 13){
        return;
    }    

    // put the code for search here.

}

score 0 · Answer 5 · answered Mar 23 '16 at 12:09

set id="btn_search_product" to your button

var btn_search_product = document.getElementById("btn_search_product");
btn_search_product.addEventListener("keydown", function (e) {
    if (e.keyCode === 13) {
        searchProduct(e);
    }
});

I actually use evento library https://github.com/petermichaux/evento

with it it would be:

evento.add(btn_search_product, "keydown", function (e) {
        if (e.keyCode === 13) {
            searchProduct(e);
        }
});

ajax, javascript - start function with two events

5 Answers5