Button click function is not triggering on IE11 - javascript

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

Related

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

ajax, javascript - start function with two events

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

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)"

How to set the default button of a form from javascript?

How to set the default button of a form using javascript or jQuery??
$(document).ready(function ()
{
$(".tbPassword").keydown(function (e) /* or keyup */
{
if (e.keyCode == 13) // 27=esc
{
$("form").submit();
}
});
});
I know this is an old one, but having spent a good amount of time trying to figure it out (we have a number of different textboxes and buttons) this seemed to be the most straightforward method based on them hitting 'Enter' whilst still in the last input
$(document).keypress(function (e) {
if (e.keyCode === 13) {
if ($("#inputLoginPassword").is(":focus")) {
$("#LoginButton").click();
}
if ($("#inputIntegratedPassword").is(":focus")) {
$("#integratedLoginButton").click();
}
if ($("#inputPinNumber").is(":focus")) {
$("#PinLoginButton").click();
}
return false;
}
});
I'v got the answer from the web URL JQuery: Setting Default Submit Button For ‘Enter Key’ Using JQuery
which he writes the following script:
<div>
<input type="submit" name="CancelButton" value="Cancel" />
<input type="submit" name="DeleteButton" value="Delete" />
<input type="submit" name="UpdateButton" value="Update" />
</div>
Now if you have your focus on one of the HTML form fields – First Name or Last Name and hit ‘Enter Key’, form will be submitted to one of the button actions but you are not sure which ones!
Now let us say you wanted to default the form submission always to “Update” button, you need to do the following –
1- Assign an ID to Update button
<input type=”submit” name=”UpdateButton” value=”Update” id=”defaultActionButton”>
2 -Capture onKeyDown event for textboxes and submit the form to “Update” button / action. [this is where I use jQuery]
// all jQuery events are executed within the document ready function
$(document).ready(function() { $("input").bind("keydown", function(event) {
// track enter key
var keycode = (event.keyCode ? event.keyCode : (event.which ? event.which : event.charCode));
if (keycode == 13) { // keycode for enter key
// force the 'Enter Key' to implicitly click the Update button
document.getElementById('defaultActionButton').click();
return false;
} else {
return true;
}}); // end of function }); // end of document ready
$("form").append('<input type="submit" value="OK" />');
allows you to add a default submit button to all your forms, using jQuery. You can tweak this button a lot before appending it
make a div (with id) in the place where do you want to place the button.
<div id="placeHere"></div>
and from jQuery do this.
$("#placeHere").html('<input type="submit" value="Submit" />')
Hope his helps

Categories