I have a text input on a form that I need to check if the value has changed at anytime. Essentially the text input is a date field and I'm using a 3rd parties script to popup a calendar where you can select a date which is then set as the text field value.
So here is my problem. Say when the form is loaded the text field already has a value of 1/1/11 if someone clicks on the field and changes it with the keyboard to 1/2/11 or anything else my event listener kicks off and executes the function I want. My problem is that if someone clicks the calendar icon and selects a date though it changes the value of the input field it doesn't kick off the event handler.
I've tried using onchange event handler directly on the input box and an event listener for the input box and it appears both only pick up the change when focus on the field has changed. Here is the event listener script the way it sits now..
document.getElementById('anchor1x').addEventListener('change', function() {
alert("date changed");
}, false);
Is there something else I can do to check if the field value is changed be it by user input through direct typing or through the calendar select?
Perhaps add an event listener to the icon as well? That way when its selected, it'll also fire.
Related
I have a input type="text" and next to that a button which opens up a calendar on click. When a value is selected in calendar textbox ix populated.
I would like to handle on change of textbox to enable other controls.
change, input etc events are triggered only if use manually enters values in the text box. But in my case I am not touching the input textbox.
Thanks.
Use jquery change event.
$("input").change(function(){
//do something
})
Update:
As .change event doesn't get fired when you change value using any javascript method, there is a work around.
When you change the date, you can trigger an event to the input element like $("input").keyup() and listen using:
$("input").keyup(function(){
// input updated
})
codepen example: https://codepen.io/azharuddinkhan8898/pen/MNrLad
I have a HTML form. I want to enable/disable a button until user eneters text in one of the fields. I am adding an event attribute to the which triggers some javascript. This javascript will enable/disable the button.
Problem is I can't figure out what event attribute to use. What event attribute please will trigger as soon as user enters data? I tried onchange but that only gets called when i clicked back outside the text area. So it may aswell be onblur.
You can use the input
function activateForm (event) {
if(!this.value == ""){
}
}
var input = document.querySelector(".myInput");
input.addEventListener("input", activateForm , false)
There are 2 possible events that can be used: either onChange or onKeyPress. onChange will trigger when the value of an input has changed while onKeyPress will trigger every time the user types something in a text box. The onChange triggers once the user has CHANGED something in the value, and got out of the input focus. That means the user has to hit TAB or click somewhere else for the event to trigger, hence why onKeyPress might be better suited.
Read more:
http://www.w3schools.com/jsref/event_onchange.asp
http://www.w3schools.com/jsref/event_onkeypress.asp
Younger browsers also support onInput which should certainly be prefered for now, if you do not need to support older browsers.
I have a input text field and a button to submit. I want the button to be enabled only when i enter something into text field. I used onchange="enableButton();" onkeyup="this.onchange();" onpaste="this.onchange();" oninput="this.onchange();"
but when i double click on input field a dropdown appears from cache and upon selecting the value from this dropdown no event fires.
Can anyone please suggest me how to do enable button.
I solved a similar problem by deferring onchange actions via setImmediate, which allows other pending events to be processed first. In your case, try setting onchange to this: onchange="setImmediate(enableButton)".
To illustrate: http://sas98.user.srcf.net/guestlist/
I want a new input field to be created when the user types something in the guest list field at the bottom.
Is it possible to do this as opposed to having to press a button with onClick?
you can add a blur event that gets fired when a first input box looses focus. THere can be an additional check to make sure someone put some text to the first input field, if there is a value add a new input field
$('#guest_list_input').blur(function() {
if($(this).val().length>0) {
$('#myPlaceWhereIWantToAddANewInputField').append('<input value='test' name='test' />');
}
});
You might want to append a new input after focus, blur or change events.
My choice would be to create a field on focus (so the user can switch to it by pressing Tab) and optionally remove the empty fields on blur events. Possibly with some fancy fadeIn/Out effects.
in html and javascript, I can use keyup, focus, blur to detect most of the content changes in a text input, however if the user do a copy and paste into the text input, how do I capture this change? The issue here is that the input is already in focus when user paste into it.
You could capture the paste event (http://www.quirksmode.org/dom/events/cutcopypaste.html)
$("#myinput").bind("paste",function(){
//code here
})
$("#myinput").change(function(){
// whatever you need to be done on change of the input field
});
// Trigger change if the user type or paste the text in the field
$("#myinput").keyup(function(){
$(this).change();
});
// if you're using a virtual keyboard, you can do :
$(".key").live('click',function(){
$("#myinput").val($("#myinput").val()+$(this).val());
$("#myinput").change(); // Trigger change when the value changes
});
the textbox has an OnChange event that fires when a) the text box loses focus AND the value within the text box has changed.