ajax, javascript - start function with two events - javascript

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>

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!

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>

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;
}

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.
}

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);
}
});

Related

Button click function is not triggering on IE11

.click() function is occurring on all browsers except IE11. I am wondering if IE cannot support this method due to using an older JS or JQuery version:
function bindSearchInputToBtn() {
$('#joblist-search-partial #textValue').keyup(function (e) {
//Enter key event
if (e.keyCode === 13 || e.which === 13) {
$('#joblist-search-partial .search-button .btn-primary').click();
}
});
}
IE recognises the enter button press as well as the button, but seems to not be able to handle the click() function. Is there a way around this?
I have tried other options on SO, such as on('click', function() however was not successful, and think I may coming at it from the wrong angle.
New to JS, so may be missing something simple. Thanks!
Try using old school javascript methods instead of jQuery. jQuery uses a lot of new ES6 methods behind the scene which Internet Explorer might not know.
function bindSearchInputToBtn() {
$('#joblist-search-partial #textValue').keyup(function (e) {
//Enter key event
if (e.keyCode === 13 || e.which === 13) {
let joblist = document.getElementById('#joblist-search-partial');
let btn-primary = joblist.childNodes[0].childNodes[0] //<-- Assuming that .search-button is the first child of #joblist-search-partial and .btn-primary of .search-button
btn-primary.click();
}
});
}
If you want to attach javascript event for multiple Html elements using the JQuery selector, you need to add ',' between the JQuery selector. Please refer to the following code:
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
function bindSearchInputToBtn() {
$('#joblist-search-partial,#textValue').keyup(function (e) {
//Enter key event
if (e.keyCode === 13 || e.which === 13) {
$('#joblist-search-partial, .search-button, .btn-primary').click();
}
});
$('#joblist-search-partial, .search-button, .btn-primary').click(function () {
alert($(this).val())
});
}
</script>
</head>
<body onload="bindSearchInputToBtn();">
<input id="joblist-search-partial" type="text" /><br />
<input id="textValue" type="text" /><br />
<button class="btn search-button" type="button" value="Search" >Search</button>
<button class="btn btn-primary" type="button" value="Submit" >Submit</button>
</body>

Button type button is triggered on enter key?

I know this is an already explained topic, but for some reason my input number triggers my button. I've read that if you put type=button it should not do it, but it still does. I've also tried to set event.preventDefault() and nothing seems to work.
$(".buttonForNumber").on('click', function (evt) {
alert("I'm here, I don't know why");
});
$(".numberToEnter").on('keyup', function (evt) {
evt.preventDefault();
if (evt.keyCode === 13) {
//do something....
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" class="form-control numberToEnter">
<button type="button" class="btn btn-default buttonForNumber">
Button
</button>
Try this...
$("body").on('keyup', function (evt) {
evt.preventDefault();
if (evt.keyCode === 13) {
$(".buttonForNumber").trigger('click')
}
});
It was because I had my button inside a form, I removed the tag and it was solved

How to fire only one of the event if both of them occur?

I used this code to handle to event , but I want to fire one time if both of them or one of them occur.
$(document).on("keypress blur", ".pollOptionInput", function(e) {
if (e.type == 'focusout' || e.keyCode == 13) {
e.preventDefault();
addPollOption();
$('.btnAdd').focus();
}
});
My code fire two time if I press enter key .
how can I solve my problem ?
It works without any problems. Maybe you attach event twice and that's the problem.
Note that i changed a way of event attaching - read more
$(document).ready(function(){
$(".pollOptionInput").on("keypress blur", function(e) {
if (e.type == 'blur' || e.keyCode == 13) {
e.preventDefault();
//addPollOption();
//$('.btnAdd').focus();
console.log('EVENT!');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" class="pollOptionInput" />
<input type="text" class="pollOptionInput" />
<input type="text" class="pollOptionInput" />
Is this what you expect?
You can pass the function on document this way:
var myFunction = function() {
addPollOption();
$('.btnAdd').focus();
//if you don't want an event occurs multiple times after one call:
e.stopPropagation();
}
$('document')
.keypress(myFunction)
.blur(myFunction)

On Enter fire javascript function

After reading this post here in Stackoverflow, (Detect the Enter key in an text input field) I tried to make a few of my inputs fire on enter... I did not work. I made a simple example and it still doesn't work. Can someone hint as to the proper way? (FYI - Definitely a newbie here)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>On Enter</title>
<script src="../../Scripts/jquery-2.1.0.min.js"></script>
<script>
$(".input1").keyup(function (e) {
if (e.keyCode == 13) {
alert ("It Works");
}
});
</script>
</head>
<body>
<input type="text"
id="input1"
placeholder="Press Enter When Done">
</input>
</body>
</html>
Thanks
First you need to say #input1 other than .input1, then run it when the entire DOM is ready:
$(document).ready(function(){
$("#input1").keyup(function (e) {
if (e.keyCode == 13) {
alert ("It Works");
}
});
});
Edit: As #jfriend00 mentioned in a comment it's a good idea to use e.which other than e.keycode. To do so you can change: e.keyCode == 13 to e.which == 13. This way is recommenced by the people at jQuery, as it normalizes e.keyCode and e.charCode.
Change the .input1 in your JS to #input1
When you use . it means it's a class, but you have an ID, which is #.
Your code is triggering a "class", not an "id", so add a "#" instead of a "." in input1:
$("#input1").keyup(function (e) {
if (e.keyCode == 13) {
alert ("It Works");
}
});
first, like the previous answer your criteria is not good. change for ID
second, put your javascript at the and of the file on in the ready document.
Because the javascript is in execution while the documenta as not finish to load . So the event can't be add to an element that doesnt exist.

javascript event onkeypress event won't run

I'm trying to alert the user whenever he/she presses enter. I decided to use javascript for this. I have the following bit of html:
<div id="all">
<h1>Welcome to the awesome chat system.</h1>
<input type="text" id="name"><br/>
<textarea rows='30' id="chatArea" disabled='true'>
</textarea>
<textarea id="writtenThing" onkeypress="keyfunction(e)"></textarea>
<button id="send">Send</button>
</div>
Here is the javascript:
<script>
function keyfunction(e)
{
if(e.keyCode == 13)
{
alert("things to do...");
}
}
</script>
However the problem that I'm facing is that even though I press enter inside the textarea my browser does not alert me. I'm sure I'm using a browser which supports this.
Pass the event to the function:
<textarea id="writtenThing" onkeyup="keyfunction(event)"></textarea>
Add some cross browser support:
function keyfunction(e)
{
if(e.keyCode == 13 || e.which == 13)
{
alert("things to do...");
}
}
JS Fiddle: http://jsfiddle.net/3MF3h/
Use the following javscript.
document.getElementById("writtenThing").onkeypress = function (e)
{
if (e.keyCode == 13)
{
alert("things to do...");
}
}
you can replace onkeypress with onkeyup/onkeydown
Also, correct the code with following:
onkeypress="keyfunction(event)"

Categories