Develop Reference

How to handle change or input event of input type="text" if value is inserted from another element without touching this input

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

What event to know when user has entered data into form?

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.

onChange event not firing when input changed dynamically

On my form, I have a DropDown, when a value is selected, I fire some JavaScript that populates some visible <input type="text" /> fields (under neath the drop down).
The problem is, I also want to run some JavaScript function whenever the value of one of these inputs changes, I want this function to run even if the text input is changed by the drop down selection.
Here is my current code:
jQuery(document).ready(function() {
$('#mainPane').on('change', '#formElementFromEmail', function(event){
var collectFromDropDown = $('#formElementFromEmail');
persistHiddenInputForCollectFromValue();
});
});
I suspect the change event is not being fired because no one has manually changed the value of the field in question. How can I overcome this?

Since you're using jQuery, you can trigger the event:
$('#mainPane').trigger('change');

you can simulate change event by
var element = document.getElementById('formElementFromEmail');
element.onchange();

Jquery Chosen - Prevents capture of keypress

I have a div (id = div_search_fields) within which I have several jQuery Chosen dropdowns. Attached to the div I have a keypress capture listener which, if the key pressed is the Enter key, submits the selected stuff by clicking a hidden submit button.
$("#div_search_fields").keypress(function(e) {
if (e.which == 13) {
$("#hiddenSubmitButton").click();
}
});
For some reason this listener is never called if I have just selected an option in one of the chosen dropdowns. Within the "div_search_fields" DIV I also have a simple text input box and if I have just entered text there and then press the Enter key, the listener is triggered as expected.
This must be something to do with focus on the Chosen dropdowns but I cannot fathom why? Any ideas?

As Far I can see Jquery chosen is using e.preventDefault() in keypress event so it is not allowing to execute your code. There should be some function which you can override to achieve your goal or you can get ride of e.preventDefault().

Two things:
If the input in the dropdowns is generated dynamically AFTER the keypress event is bound, the event won't be bound to those elements.
IDs should be unique to one element. Use a class instead if you want to bind an action to multiple elements.
Use .on() instead:
$(".div_search_fields").on("keypress", function(e) { . . . });

Document input track change

I need help on this one:
In the document there are several input fields with <div class="quantity"><input .. >
This is automatically generated by the system and I have no access to alter this.
So I need a way with jQuery to track the onchange function when the input changes.
What is a good way to achieve this?
var updateInput = document.getElementById(".quantity input");
if ( updateInput ????? ) {
alert("Hallo")
};

getElementById does not work on class names. You asked for jquery, why not use change()?
$('.quantity input').change(function() {
alert('Input changed');
});
From the manual:
The change event is sent to an element
when its value changes. This event is
limited to <input> elements,
<textarea> boxes and <select>
elements. For select boxes,
checkboxes, and radio buttons, the
event is fired immediately when the
user makes a selection with the mouse,
but for the other element types the
event is deferred until the element
loses focus.
Demo: http://jsfiddle.net/Madmartigan/yzGYU/