I want to get the input value while I keep pressing keyboard keys.
Following updates the input if I click out of the input field.
$('create-text').onchange = function() {
console.log("whoo: " + this.value);
}
The .change event triggers when the value has been changed and the element loses focus, as in click outside of the element.
When releasing a pressed key:
$('create-text').keyup(function() {
console.log("whoo: " + this.value);
});
When pressing a released key and wanting to record modifier and not-printing keys:
$('create-text').keydown(function() {
console.log("whoo: " + this.value);
});
When pressing a released key and not needing the above:
$('create-text').keypress(function() {
console.log("whoo: " + this.value);
});
However, you would probably want to use a proper selector .create-text or #create-text to target your input element. You could also get more specific by using something like input[name="cr-text"]#create-text.
// On pressing key
$("input").keyup(function(){
console.log($(this).val())
});
// When focus lost
$("input").focusout(function(){
console.log($(this).val())
});
Related
upon clicking element with attribute 'data-one' above, an update to an email field's value occurs. how can I detect if there was a change - the new update? note that there is an async process that updates the email address post-clicking
$('a[data-one]').on('click', function() {
$('input#field_email_address').on('change', function() {
console.log('email value was change detected');
});
});
Move the change event code out of the click event code and in the click event code just update the email field as needed.
But, you'll need to manually trigger the change event of that field because change only fires when the field loses focus, which it won't if done with code.
$('a[data-one]').on('click', function() {
$('input#field_email_address').val("CHANGED!");
$('input#field_email_address').trigger("change");
});
$('input#field_email_address').on('change', function() {
console.log('email value was changed');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Test
<input id="field_email_address">
Right now you are adding a change event listener every time that you click on the a[data-one] button.
You can check the value of the email field by using the .val() method. Compare the current value against a previously stored value and see if it differs. If it does, store the new value and log your message.
var emailValue = '';
$('a[data-one]').on('click', function() {
var newEmailValue = $('input#field_email_address').val();
if (emailValue !== newEmailValue) {
console.log('email value was changed');
emailValue = newEmailValue;
}
});
This code is in foreach loop of php
$('input[name="<?=$value?>"]').on('change',function(){
spanval = $(".formscore").text();
width = $(".formProgressbar").width() / $('.formProgressbar').parent().width() * 100;
width = Math.round(width);
var currentval = $(this).val();
if(currentval != ''){
$(".formscore").text(parseInt(spanval) + <?=$sql123->score?> + '%' )
$(".formProgressbar").width(parseInt(width) + <?=$sql123->score?> + '%' )
}else{
$(".formscore").text(parseInt(spanval) - <?=$sql123->score?> + '%' )
$(".formProgressbar").width(parseInt(width) - <?=$sql123->score?> + '%' )
}
});
this code changes progress-bar as input field changes.
now the problem is that It changes every time when field is changed.
I tried Following Handler of jquery
change
blur
keyup
keydown
focusout/in
I want to Fire an event when user move to next input field or release input field. I am open to any other suggestions.
If you're trying to add event listener to dynamically generated element, instead of
$('input').on(event, function(e){
// won't work for dynamically generated element
});
you should use next code:
$('form').on(event, 'input', function(e){
// will work for dynamically generated element
});
This code is for next html:
<form>
<input type="text" name="">
</form>
Where input is dynamically generated element, event is your event (change, blur, etc.)
$('input[name="<?=$value?>"]').on('blur',function(e){
//Do something
});
You should probably add a class to your input when the user triggers the blur event. Then use this class to block the next trigger of the event.
(You can also use jQuery's .data () method instead of a class)
Or better, use an each loop triggered by the blur event to count all inputs filled to increase or decrease the progress bar.
See JS fiddle example
var total = $('input').length
$('input').on('blur', function() {
var counter = 0;
$('input').each(function() {
if($(this).val()) {
counter += 1;
}
})
console.log('Progress : '+counter+'/'+total+'. Percent : ' + (counter*100/total)+ '%')
})
I have an input field, by click value become * when I lose my focus field become clean. How to add additional * to input by every single click?
$('body').append("<input type='text' />");
$('input').click(function() {
$(this).val('*');
});
$('input').mouseleave(function() {
$(this).val('');
});
You are replacing the value of the input field. You want to append to it. Change $(this).val('*'); to $(this).val($(this).val() + '*'));
Your mouseleave() function call is what's making the field blank. If for every click you want to add an asterisk:
$('input').click(function() {
$(this).val('*' + $(this).val());
})
Use a variable outside the functions to store the *
$('body').append("<input type='text' />");
var inputVal="";
$('input').click(function() {
inputVal +="*";
$(this).val(inputVal);
})
$('input').mouseleave(function() {
$(this).val('');
})
I currently have a selection of buttons and on click of a button I want to add the text from the button into a text-box. Every time I click on the button I want to be able to append on to whatever I have in the input field.
What I currently have
$('#js-AddFilterOpenBracket').click(function () {
$('#js-FilterString').val($(this).text());
});
What I'm Aiming for
$('#js-AddFilterOpenBracket').click(function () {
$(this).text().appendTo($('#js-FilterString'));
});
No need to use appendTo as it should be used for elements. Rather, manually append to the current value then set it
$('#js-AddFilterOpenBracket').click(function () {
var currentVal = $('#js-FilterString').val();
var newVal = currentVal + $(this).text();
$('#js-FilterString').val(newVal);
});
May not be the bast way but you could do this
$('#js-AddFilterOpenBracket').click(function () {
$('#js-FilterString').val($('#js-FilterString').val() + $(this).text());
});
$('input[type="radio"]').change(function() {
alert(this.value);
});
this.value here already contains new value. How can I get previous value (i.e. prior to change value)?
The change event has a eventData and an eventObject in the function. See here: http://api.jquery.com/change/ try playing with them. I think you can pass the old value in the eventData and retrieve it in the function through the eventObject.
Since there is no such event, I had to store prev value in data-original-value attribute:
$('input[type="radio"]').change(function() {
alert(this.name + ': ' + $(this).parents("div.control-group").attr('data-original-value') + ' -> ' + this.value);
$(this).parents("div.control-group").attr('data-original-value', this.value);
});