I've currently this function here:
let input = [];
input.push(jQuery("#test1"));
input.push(jQuery("#test2"));
input[0].add(input[1] ).one( "keyup", function () {
console.log("Keyup!");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="test1"/>
<input id="test2"/>
It works but I've a bit of a problem. I need to unbind the keyup event if one of the two inputs are detected so that the other one don't works anymore. How can I do this?
As result, only one log Keyup! should be visible.
u can unbind with jquery-off -method (https://api.jquery.com/off/) like so:
let input = [];
input.push(jQuery("#test1"));
input.push(jQuery("#test2"));
input[0].add(input[1] ).one( "keyup", function () {
$(input).each(function() {
$(this).off("keyup");
});
console.log("Keyup!");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="test1"/>
<input id="test2"/>
So, this was my solution:
let input = [];
input.push(jQuery("#test1"));
input.push(jQuery("#test2"));
input[0].add(input[1]).one("keyup", function() {
console.log('keyup!');
for(i=0; i<input.length; i++){
if(input[i].attr('id') != event.target.id){
input[i].unbind();
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="test1" />
<input id="test2" />
Don't know if you'll like it, but I find useful to know which element triggered the event in order to use this info after.
Moreover, you'll be able to add more elements to input array and automatically unbind the event from them too.
To achieve that you can add an extra data attribute and check against that:
<input id="test1" data-disabled="false"/>
<input id="test2" data-disabled="false"/>
Then your js would look like this:
input[0].add(input[1] ).one( "keyup", function () {
if ($(this).attr("data-disabled")==="true") {
return false;
}
$(this).siblings().attr("data-disabled","true");
console.log("Keyup!");
});
Related
$(document).ready(function() {
$(".inputWithLimit").each(() => {
var inp = this;
inp.addEventListener("input",
function (event){
console.log($(inp).val().length);
});
});
})
I've also tried "keyup" and "change" as event handlers, and in both other cases, jquery is doing a strange thing with assigning these listeners. Thanks.
If you are using jQuery then there is no need to loop through each element and add an event listener. An example which logs the value of each input when you input something.
$(document).ready(function() {
$(".inputWithLimit").on('input',function() {
console.log(this.value);
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="inputWithLimit">
<input class="inputWithLimit">
The problem is your arrow function. When using arrow function, then you can't use `this'
$(".inputWithLimit").on("input", function() {
console.log($(this).val().length);
});
I've also made your code shorter.
Demo
$(document).ready(function() {
$(".inputWithLimit").on("input", function() {
console.log($(this).val().length);
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="inputWithLimit" />
I have a jquery code
$(function() {
$("input").on("mouseover", function() {
var a = $('input').attr('name');
populate(a);
});
});
I have three input elements.
Computer Language: <br>
<div>
<datalist id="language"></datalist>
<input type="text" list="language" name= "language" id="search"/>
</div>
<br>
Country: <br>
<div>
<datalist id="country"></datalist>
<input type="text" list="country" name= "country" id="search" />
</div>
<br>
Degree: <br>
<div>
<datalist id="degree"></datalist>
<input type="text" list="degree" name= "degree" id="search"/>
</div>
Now, mouseover event only fires that have name language (or the top input element). Why mouseover event is not being fired for 2nd and 3rd input elements?
Note: The ids are not meant to be duplicated. You have used id="search" many times.
You need to use the context-sensitive this keyword:
$(function() {
$("input").on("mouseover", function() {
var a = $(this).attr('name');
populate(a);
});
});
To answer your question:
The reason being, you are executing the .attr() (which is one of many functions that processes only one element) on the first matched element.
You could use the parameter of your handler:
$("input").on("mouseover", function(e) {
var a = $(e.target).attr('name');
populate(a);
});
e.target is exatcly the element you are looking for.
You can use directly javascript instead to transform the element into a jQuery object:
$("input").on("mouseover", function(e) {
var a = e.target.getAttribute('name');
populate(a);
});
You need to refer to the current element which is done using $(this) ,
this refer to the element that invokes the event. $(this) will return the object. While
$('input').attr('name') will refer to the first input element
var a = $(this).attr('name');
JSFIDDLE
In JQuery code you always get "language" input, because it is first input in dom, as your code search first input.
Change your jQuery code as below:
$(function () {
$("input").on("mouseover", function () {
var a = $(this).attr('name');
populate(a);
});
});
Hello I have an array of input text they all have the same class, so I want to put an event OnChange with jquery to everyone of them.
My HTML code is:
<input type="text" class="form-control placementTest" data-mask=''>
and my Javascript is:
$('.placementTest').each(function() {
$(this).on('change',function (ev) {
alert('done it');
});
});
but it's not working. So, what is wrong?
No Need for $('.placementTest').each . Also, with an input, you want the keyup event Just need
$('.placementTest').keyup(function() {
//do stuff
})
or fire when the user leaves the input:
$('.placementTest').blur(function() {
//do stuff
})
Fiddle http://jsfiddle.net/qpu0Lsth/2/
your event must trigger after editing ( same on blur ).
if you need to trigger when user input something try to use about onkey "keydown" "keypress" "keyup" etc. . Example below !
$('.placementTest').each(function() {
$(this).on('keypress',function (ev) {
alert('done it');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
input 1 <input type="text" class="form-control placementTest" data-mask=''>
input 2 <input type="text" class="form-control placementTest" data-mask=''>
input 3 <input type="text" class="form-control placementTest" data-mask=''>
P.S. it's work fine !
Looks like you have two classes in the markup. Try to use one class
Looking for a script that copies input value 1 to input 2 on button click and add +1 to sets text box.
b = document.getElementById('tussenstand').value;
var theTotal1 = b;
$(document).on("click", "#button1", function(){
theTotal1 = Number(theTotal2)
$('#eindstand').val(theTotal2);
});
$('#eindstand').val(theTotal2);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input id="tussenstand"></input>
<input id="eindstand"></input>
<input id="sets"></input>
<button id="button1">click</button>
Thanks in advance.
I think this will do it.
$(document).on("click", "#button1", function(){
var total = document.getElementById('tussenstand').value;
$('#eindstand').val(total);
var sets = parseInt($('#sets').val());
$('#sets').val( (sets || 0) + 1);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input id="tussenstand"></input>
<input id="eindstand"></input>
<input id="sets"></input>
<button id="button1" onclick="">click</button>
$('#button1').click(function(){
$('#eindstand').val($('#tussenstand').val());
$('#sets').val(Number($('#sets').val())+1);
});
check here : jsfiddle
Edited as you commented
The code below should work. There are several issues that will help you in the future. In the HTML the function that is triggered via the onclick will interfere with the jQuery onclick. You may want to remove it.
onclick="bereken();
The way that you have your code the b variable is not declared.
b=document.getElementById('tussenstand').value;
The way that the jQuery onclick is written should have a narrower scope (not the document). The way that it is now every time you click any were in the document it fires. I changed this:
$(document).on("click", "#button1", function(){
to this:
$("#button1").on("click", function() {
The full edited code is here.
var count = 0;
$("#button1").on("click", function(){
if ( typeof b === 'number') {
count++;
$("#eindstand").val(b);
$("#sets").val(count);
}
});
Look at the JQuery API Documentation for the .on() method. The function doesn't take the target as a parameter, but as the caller object! EDIT: well, it would actually still work the other way around, but that makes event delegation. Only do that if you know what you're doing. I prefer changing this:
$(document).on("click", "#button1", function(){ ... });
into this:
$("#button1").on("click", function() { ... });
Which in vanilla JS would be:
document.getElementById("button1").addEventListener("click", function() { ... });
Next, you shouldn't need to define variables outside of your function, and naming variables with numbers in them is a bad practice. Try to make the names as clear as possible.
Now that this is clear, here's how I'd write it:
$("#button1").on("click", function() {
$("#eindstand").val($("#tussenstand").val());
$("#sets").val(parseInt($("#sets").val())+1);
});
To achieve that use:
$(function() { //on DOM ready
$('#button1').click(function(){ //Attach event
//Get value safe - can use parseFloat() too:
val1 = parseInt($('#tussenstand').val());
val2 = parseInt($('#eindstand').val());
sets = parseInt($('#sets').val());
//Make sure we are using integers:
if (isNaN(val1) || isNaN(val2) || isNaN(sets)) return;
//Add
$('#eindstand').val(val1 + val2);
//Increment:
$('#sets').val(sets+1);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="tussenstand" type='number' />
<input id="eindstand" value='0' type='number' />
<input id="sets" value='0' type='number' />
<button id="button1">click</button>
I would like to add an onchange event to those input fields without jquery:
<input type="text" id="cbid.wizard.1._latitude">
<input type="text" id="cbid.wizard.1._longitude">
I can already call the object with
<script type="text/javascript">
alert(document.getElementById('cbid.wizard.1._latitude').id);
</script>
In the end, I want to add this behaviour, that if you enter a pair of coordinates into the first input, I will spread the pair over the two input fields?
How do I add an onchange event with javascript?
Ummm, attach an event handler for the 'change' event?
pure JS
document.getElementById('element_id').onchange = function() {
// your logic
};
// or
document.getElementById('element_id').addEventListener(
'change',
callbackFunction,
false
);
jQuery
$('#element_id').change(function() {
// your logic
});
Note
Note, that change event on the text field will be fired after the blur event. It's possible that your looking for keypress event's or something like that.
document.getElementById('cbid.wizard.1._latitude').onchange = function(){
//do something
}
GlobalEventHandlers.onchange docs
or
document.getElementById('cbid.wizard.1._latitude').addEventListener("change", function(){
//do something
});
EventTarget.addEventListener docs
use addEventListener in your window.onload
window.onload=function(){
document.getElementById('cbid.wizard.1._latitude').addEventListener("change", function(){
//do something
});
};
addEventListener
Please try with the below code snippet.
<body>
<input type="text" id="cbid.wizard.1._latitude">
<input type="text" id="cbid.wizard.1._longitude">
<script type="text/javascript">
var txt1 = document.getElementById('cbid.wizard.1._latitude');
txt1.addEventListener('change', function () { alert('a'); }, false);
</script>
</body>