I have a text field and a button. Either when the button is clicked or enter is hit, a function should be executed.
My approach works is intended. However, is it possible to combine those 2 functions (click and keypress), so that I only have 1?
$("button").click(function() {
getInput();
});
$("#name").keypress(function(e) {
if (e.which == 13) {
getInput();
}
});
function getInput() {
alert($("#name").val())
}
So I need to just append those events.
Here is a fiddle.
You can listen for multiple events using .on('listOfEvents')
Than you just need some additional rules to check when you need to run function.
$("button, #name").on('click keypress', function(e) {
if ($(e.currentTarget).attr('id') == 'submit' || e.which == 13) {
getInput();
}
});
function getInput() {
alert($("#name").val())
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="name" />
<button id="submit">
OK
</button>
function getInput(){
return $(".result").text($("input").val());
}
$("form").on("submit", (ev)=>{
ev.preventDefault();
// handle submission
getInput();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="">
<input type="text" />
<button>ok</button>
</form>
<div class="result"></div>
you can wrap your input and button in a form and listen for a submit event on that form. Forms can be submitted by pressing enter in an input inside of them or clicking a button that is enclosed
HTML
<form action="">
<input type="text" />
<button>ok</button>
</form>
Javascript
$("form").on("submit", (ev)=>{
ev.preventDefault();
// handle submission
getInput();
})
#eltonkamami answer is one idea and my idea is to provide same class for both input field and button like this :
(But, this will trigger whenever input field is changed)
$(".same").bind("click keypress", function() {
getInput();
});
function getInput() {
console.log($("#name").val())
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="name" class="same" />
<button id="submit" class="same">
OK
</button>
Hope it helps :)
We can differentiate a click and keypress by e.key or e.type parameters
Try this,
var getInput = function(e) {
if((e.which & e.which==13) || !e.key)
//e.key is a parameter for keypress event and not for click
alert($("#name").val())
}
$("button").click(getInput);
$("#name").keypress(getInput);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<input type="text" id="name" class="same" />
<button id="submit" class="same">
Click
</button>
$("button,#name").on("click keypress",function(e) {
//alert($(e.currentTarget).html());
if (e.which == 13) {
getInput();
}else if(event.type == 'click'){
getInput();
}
});
function getInput() {
alert($("#name").val())
}
Related
I have this button that leads to a method in javascript that filters the information of a table:
<button type="button" id="search" title="Buscar" onclick="fn_cliente.filtraInformacion();"></button>
There are several fields for which you can filter the information, I want that when pressing "enter" on any input, it executes the same method as when clicking on the button
Use the following to bind the enter event to your search fields.
document.querySelectorAll('.searchfield').forEach(function(input) {
input.addEventListener('keypress', function(e) {
if (e.keyCode === 13) filtraInformacion();
});
});
Look at this code snippet
function filtraInformacion() {
console.log('filtraInformacion has been called!');
}
document.querySelectorAll('.searchfield').forEach(function(input) {
input.addEventListener('keypress', function(e) {
if (e.keyCode === 13) filtraInformacion();
});
});
<button type="button" id="search" title="Buscar" onclick="filtraInformacion();">Click me</button>
<br>
<input id='name' class='searchfield' placeholder='Press Enter!'>
<br>
<input id='lastname' class='searchfield' placeholder='Press Enter!'><br>
<input id='gender' class='searchfield' placeholder='Press Enter!'>
See? when the enter key is pressed, the function filtraInformacion is called.
This works. You can adapt it to whatever element you want.
<input type="text" id="account-location-country-input" class="mdc-text-field__input" required onkeyup = "if (event.keyCode == 13)document.getElementById('edit-account-button').click()">
I have a form with some textboxes and checkbox.
If I change something in the textbox and I click enter the form is getting submitted and If I change the checkbox and click enter then the form is not getting submitted.
this.content.find('.form').on('keypress', function (self) {
alert(window.event.keyCode);
if(self.keyCode==13) {
alert("Boom Boom");
}
});
But this is not working
Use your "self" event, like this:
$('.form').on('keypress', function (self) {
if(self.keyCode==13) {
alert("Boom Boom");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form"><input type="text"></form>
$(document).keypress(function(e) {
if (e.keyCode == 13) {
alert('clicked');
// $('form').submit();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type='text' /> <br/>
<input type='checkbox'>
<form>
Hello I am trying to run a javascript function when I press enter.
Here is my code so far
MY HTML
<!DOCTYPE html>
<html>
<head>
<title>JS Bin</title>
</head>
<body>
<div>
<form id="inputForm">
<label for="userInput">Input : </label>
<span id="userInputSpan">
<input type="text" id="userInput" onkeydown="readInput(this)" />
</span>
</form>
</div>
</body>
</html>
MY JAVASCRIPT
function readInput(e) {
if (e.keyCode == 13) { // 13 is enter key
// Execute code here.
// var temp = e.value;
// console.log(temp);
alert(e.value);
}
}
Here is my JSBin
You're passing this to the event handler and using it as event object.
Pass the element instance and event object to the event handler.
<input type="text" id="userInput" onkeydown="readInput(this, event)" />
^^^^ ^^^^^
And get them in the handler
function readInput(el, e) {
^^ ^
// el: Element
// e: Event object
Updated JSBin
window.onload = function() {
document.getElementById("userInput").focus();
};
function readInput(el, e) {
if (e.keyCode == 13) {
console.log(el.value);
}
}
<div>
<form id="inputForm">
<label for="userInput">Input :</label>
<span id="userInputSpan">
<input type="text" id="userInput" onkeydown="readInput(this, event)"/>
</span>
</form>
</div>
Suggestions:
Use DOMContentLoaded event instead of using onload.
Use addEventListener to bind event
To set focus on page load, use autofocus attribute on input
To prevent form from submit, use return false; or event.preventDefault() from event handler.
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('userInput').addEventListener('keydown', function(e) {
if (e.keyCode == 13) {
console.log(this.value);
e.preventDefault(); // Prevent default action i.e. submit form
// return false;
}
}, false);
});
<div>
<form id="inputForm">
<label for="userInput">Input :</label>
<span id="userInputSpan">
<input type="text" id="userInput" autofocus />
</span>
</form>
</div>
Here is the plain javascript I used. Hope it helps you.
document.onkeyup = function(e){
if(e){
var key = window.event ? e.keyCode : e.which;
}else{
var key = window.event ? event.keyCode : event.which;
}
if (key == '13') {
//Code you would like to execute
}
}
Rather, I'd suggest not to embed JavaScript in HTML.
document.addEventListener('keydown', function(e) {
if ( e.keyCode == 13 ) {
var ele = document.getElementById('userInput');
alert(ele.value);
}
});
<form id="inputForm" >
<label for="userInput">datt1939 : </label>
<span id="userInputSpan">
<input type="text" id="userInput">
</span>
</form>
Since StackOverflow sandbox prevents alert from firing, here's a JSFiddle.
There are couple of ways it can be done
Inline Event
<input type="text" value="" onKeyDown="if(event.keyCode==13) alert('Inline Event');" size="20" id="demo1" placeholder="Inline Event">
Unobtrusive Code using addEventListener
<input type="text" id="demo2" value="" size="20" placeholder="Using addEventListener">
Unobtrusive Code Calling a function
<input type="text" id="demo3" value="" onKeyUp="executeEvent(this,value)" size="20" placeholder="Seperate Handler">
JS
Attaching addEventListener to the DOM element
document.getElementById('demo2').addEventListener('keydown',function(event) {
if (event.keyCode == 13) {
alert('5');
}
})
executeEvent function
function executeEvent(elem,value){
console.log(elem)
if (event.keyCode == 13) {
alert('You entered ' +elem.value);
}
}
Here is JSFIDDLE
I have this code:
<input type="text" name="name" onkeydown="test(event)" />
function test(event){
if (event.keyCode == 13) {
$("#myButton").click();
return false;
}
}
It's not working as expected this way, but if I add an alert to the code like this:
function test(event){
alert("Why?!");
if (event.keyCode == 13) {
$("#myButton").click();
return false;
}
}
My button is this into gsp file:
<button type="submit" class="btn btn-primary" name="myButton" value="Submit">
Button
</button>
My form is this:
<g:form name="searchForm" controller="party" action="searchObject" class="form-horizontal margin-bottom-20">
</g:form>
Then everything works...
Someone can tell me what's going on and how can I solve this problem?
HTML:
<input type="text" name="name" onkeydown="test(event)" />
<button id="myButton">Button</button>
Javascript:
var test = function (event) {
if (event.keyCode == 13) {
$("#myButton").click();
return false;
}
}
$(function () {
$("#myButton").click(function () {
alert("This button was clicked using the enter key");
});
});
If i understood correctly, you are trying to invoke a click event with a key press (in this case, the enter key). Fiddle here: http://jsfiddle.net/jsu2jsx8
I have the following html:
<form id="robokassa" action="//test.robokassa.ru/Index.aspx" method="post">
<input type="text" id="OutSum" name="OutSum" value="" placeholder="Сумма пополнения">
<input type="button" name="addMoney" value="Пополнить" class="btn">
</form>
and following js:
$(function () {
$('#OutSum').keypress(function (e) {
if (e.which == 13) {
alert(2);
return false;
}
});
$("input[name='add-money']").on("click",function(){alert(1);});
});
when I click on button - listener doesn't activate.
What do I wrong ?
JSFIDDLE
change add-money to addMoney in the line $("input.... So it should become:
$("input[name='addMoney']").on("click", function () {
alert(1);
});
Because you gave your input a name of addMoney in your HTML but in your JS, you are trying to access an input with a name of add-money.