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
Related
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
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>
I have a jquery keyup script that changes a data-attribute for a checkbox input when a text input value is changed. Currently it works for only one instance of a checkbox input and text input. However, I need to modify the script to work for 10 instances.
In this fiddle you can see that I have it working for the first instance number 1, but not for 2-10.
So for example, the script is triggered when a user changes the value of the input with the id="account_balance1" as seen below.
<input type="checkbox" checked="checked" data-cost="100" debt="" value="" name="f_2[]"/>
This is the input where the value is entered for the keyup event
<input type="text" maxlength="7" class="balance" id="account_balance1" name="cardbalance" value=""/>
But I need it to work for 10 instances of these two inputs; for each instance there is an li id=card_" and input id="account_balance_" that increase 1 increment, like this... li id="card_1" to li id="card_2" to li id="card_3" and so on. This is same for the input id="account_balance_1, it goes to _2 to _3 and so on.
This is the keyup script
$(function () {
$('#account_balance1').on('keyup blur paste', function() {
var self = this;
setTimeout(function() {
var str = $(self).val();
$("input[data-cost][debt]").data('cost',str.replace(/^\$/, ''));
$("input[data-cost][debt]").data('debt',str.replace(/^\$/, ''));
$('#jquery-order-form').data('jprice').onChange();
}, 0)
})
});
Just change your jquery selector:
Instead of this:
$('#account_balance_1').on('keyup blur paste', function() {
do this:
$('.balance').on('keyup blur paste', function() {
This works because all your involved inputs have the class balance.
Fiddle here: http://jsfiddle.net/edgarinvillegas/8jdfJ/10/
Cheers
See this
http://api.jquery.com/attribute-starts-with-selector/
You just need to use this selector for selecting appropriate elements
$('[id^=account_balance_').on('keyup blur paste', function() {...
It may be a correct behavior of change event, but the below behavior is bit annoying. When the value is updated from the field history (see explanation below), the event is not triggered.
Please see example code below. the result input field is updated with the change in input field 'input1'. The form and submit button is not fully relevant, but needed to submit a form to make the browser keep the history of field values.
To test:
enter any input in the field (say ABC)
Submit the form
enter first character of input from 1 (A)
use the down arrow to select the previous value + Enter
or use the mouse to select the previous value from the history
No input change is detected.
Which event/ how should this code should modify so that an event is generated whenever the input value is changed.
thanks.
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</head>
<body>
Result:<input type="text" id="result" readonly></input>
<form method="post" action="">
<input type="text" id="input1" />
<button type=submit>Submit</button>
</form>
<script >
$(document).ready(function() {
$('#input1').change(
function(){
$('#result').val($('#input1').val());
});
});
</script>
</body>
</html>
I think this has nothing to do with jQuery.
A change event should be dispatched when the content of a control has changed and the control loses focus. In practice, the implementation of the change event is inconsistent in browsers, e.g. Firefox dispatches a change event when radio buttons are clicked on rather then when they lose focus. Also in IE, selecting a value from a list of previous values then causing a blur event doesn't fire a change event.
Note that for form controls to be successful, they must have a name attribute with a value. A simple test case is:
<form action="#">
<input type="text" name="input1" onchange="alert('changed');">
<input type="submit">
</form>
One solution is to use the blur event instead and compare the control's current value to its defaultValue - if they're different, perform whatever it is you were going to do for the change event. If the value may be changed a number of times, after the first time you need to compare with the last value onblur rather than the defaultValue.
Anyhow, here's a function that can be called onblur to see if a text input has changed. It needs a bit of work if you want to use it with other types of form control, but I don't think that's necessary.
<form action="#">
<input type="text" name="input1" onblur="
var changed = checkChanged(this);
if (changed[0]) {
alert('changed to: ' + changed[1]);
}
">
<input type="submit">
</form>
<script type="text/javascript">
// For text inputs only
var checkChanged = (function() {
var dataStore = [];
return function (el) {
var value = el.value,
oValue;
for (var i=0, iLen=dataStore.length; i<iLen; i+=2) {
// If element is in dataStore, compare current value to
// previous value
if (dataStore[i] == el) {
oValue = dataStore[++i];
// If value has changed...
if (value !== oValue) {
dataStore[i] = value;
return [true, value];
// Otherwise, return false
} else {
return [false, value];
}
}
}
// Otherwise, compare value to defaultValue and
// add it to dataStore
dataStore.push(el, value);
return [(el.defaultValue != value), value];
}
}());
</script>
Try the keyup event:
$(document).ready(function() {
$('#input1').keyup(
function(){
$('#result').val($('#input1').val());
});
});
http://jsfiddle.net/kaptZ/7/
It seems like it's definitely a browser bug. Not much you can do besides implement your own change handler with focus and blur. This example is not very reusable, but it solved the problem and can be used as inspiration for something reusable.
http://jsfiddle.net/kaptZ/9/
var startValue;
var input1 = $('#input1');
input1.focus(function(){
startValue = this.value;
});
input1.blur(function(){
if (this.value != startValue) {
$('#result').val(this.value);
}
});
A dirty alternative is to use autocomplete="off"
It looks like this bug which was supposed to be fixed in November 2009.
In modern browsers you can use the input event and update as you type. It can be bound either to the text input:
$('#input1').bind('input', function(){
$('#result').val($('#input1').val());
});
Or to the form:
$('#input1').closest('form').bind('input', function(){
$('#result').val($('#input1').val());
});
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