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
Related
I want a functionality that i will type some text on the textbox and the value will be picked up by the jquery and will be stored in some variable ,how to achieve that? i am using jquery bind function but it is not suiting my purpose .
This is my textbox
<aui:input inlineField="true" label="" name="interviewCC" id="interviewCC" size="45" value=""></aui:input>
and i am using this jQuery function
$("#interviewCC").bind("click", function () {
value = $("#interviewCC").val();
alert(value)
});
but it is not picking the value i want that when i will type something on the textbox that value will be picked up.Please somebody help.
The problem is that you listen to the 'click' event and not the 'keypress' event.
Try this:
$('#interviewCC').keypress( function(e) {
var value = $("#interviewCC").val();
alert(value)
});
Use
$("#interviewCC").keypress(function () {
value = $("#interviewCC").val();
alert(value);
});
You can use the jQuery function .keyup() which will figure out when a key has been pressed and then the press has finished.
$(document).ready(function() {
$('input#text').keyup(function() {
$('.output').text($(this).val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="text" type="text" />
<div class="output"></div>
.keyup() Documentation
There is a textbox with label; having validation of isnumeric.
Money: <input type="text" id="dollar" name="dollar" data-require-numeric="true" value="">
//Textbox with id dollar0
At run time, I have created clone of above; by clicking on button named add; and this created another textbox with different id and other attributes same; say.
Money: <input type="text" id="dollar1" name="dollar1" data-require-numeric="true" value="">
//Cloned textbox; cloned by clicking on a button named clone
On both textboxes data-require-numeric is true.
Issue: For default textbox the JQuery validation is getting executed. But for new clone; JQuery is not running.
Following is jquery:
var economy= {
init: function () {
$('input[type="text"][data-require-numeric]').on("change keyup paste", function () {
check isnumeric; if yes then border red
});
}};
$(economy.init);
How to resolve this?
Try this : You need to register click event handler using .on() in following way where registering the click handler for document which will delegate the event to 'input[type="text"][data-require-numeric]'. This way you can handle events for dynamically added elements.
var economy= {
init: function () {
$(document).on("change keyup paste",'input[type="text"][data-require-numeric]',
function () {
check isnumeric; if yes then border red
});
}};
$(economy.init);
to bind change event on dynamic dom elements . use class reference instead of id . And bind the event to its parent like,
$(document).ready(function(){
$(".parent").on("keyup",".dynamicdom",function(e){
value = $(e.target).val()
//then do your validation here. and you can attach multiple events to it
})
})
<div class="parent">
<input type="text" class="dynamicdom" >
<input type="text" class="dynamicdom" >
</div>
Ok i have keyup for multiple input fileds, my problem is because i have two calls, and i want only one. So when code is inserted only one action happens.
$(":input").keyup(function() {
if(is_draft_started == 0) {
s2 = setInterval('draft("' + frm_name + '")', auto_save_time);
is_draft_started = 1;
}
});
but with this selector when key is pressed, my function draft is called twice because i have two input fields, is there any solution, to works this only once, so when i press button one, one call exists?
No matter that you have two input fields, only one of these will trigger an event. So I guess that you have some other problems, e.g. attaching the same handler for the field twice. E.g.:
HTML:
First input: <input type="text"></input><br/>
Second input: <input type="text"></input><br/>
Total number of calls: <span id="function_calls">0</span>
JS:
var funcCalls = 0;
$(":input").keyup(function() {
$('#function_calls').text(++funcCalls);
});
Fiddle.
You can use ID or Classes to specify which input should trigger your function. Example:
<input type="text" class="trigger"></input>
<input type="text" class="no_trigger"></input>
<input type="text" class="trigger"></input>
Function will be applyied to all inputs with trigger class
$('input.trigger').keyup(function(){
alert("called just once");
});
check out this demo
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>
So I have 2 inputs. Both are for an "autocomplete". I also have 2 functions that do pretty much the same thing... Each input calls a different function onBlur. The problem is that the second upon selecting a "suggestion" for the second input, it populates the first. What can I do to make the second one populate the second?
There's probably a better way of doing it but my jQuery/Javascript Knowledge is limited and I'm running out of time... Thanks!
The code:
function fillLocation(thisValue) {
$('#location-box').val(thisValue);
setTimeout("$('#suggestionsLocation').fadeOut('fast');", 200);
}
function fillTerms(thisValue) {
$('#terms-box').val(thisValue);
setTimeout("$('#suggestionsTerms').fadeOut('fast');", 200);
}
<input type="text" name="search_location" id="location-box" value="" onkeyup="suggestLocation(this.value);" onblur="fillLocation();" autocomplete="off" />
<input type="text" name="search_terms" id="terms-box" value="" onkeyup="suggestTerms(this.value);" onblur="fillTerms();" autocomplete="off" />
I guess I'm assuming you want to trigger keyup and blur events for both inputs that have similar functionality, and that will both in turn affect the same input.
This would be one way. Bind the events in javascript, not HTML, and run the proper code
$('document').ready(function() {
$('#location-box,#terms-box')
.bind('keyup', function() {
// do your keyup thing using $(this)
// to refer back to the input
//$('body').append($(this).attr('id') + ': keyup<br />');
var theValue = $(this).val();
})
.bind('blur', function() {
// do your blur thing using $(this)
// to refer back to the input
//$('body').append($(this).attr('id') + ': blur<br />');
})
});
<input type="text" name="search_location" id="location-box" value="" autocomplete="off" />
<input type="text" name="search_terms" id="terms-box" value="" autocomplete="off" />
EDIT:
Uncomment the $('body') lines to see the events in action.
Hope this is what you were looking for.
EDIT: Added to code to the keyup event to retrieve the value