Editing html input field values in javascript does not trigger on.('change', ....) function

javascript trigger change event on input field
onchange javascript function call
html select events
textbox events in javascript
textarea events
jquery trigger input event
javascript input onchange get value
js dispatch

I have a dblclick listener that adds values into an html input field. I also have an on change function that is supposed to enable a submit button when the value in that html input field changes. However, sblclicking, and therefore adding a value into the input field, does not enable the submit button. The button does become enabled if I click in the input field and edit the value by hand, though.

Is there a work around so that the dblclick listener can also trigger the on change function?

document.addEventListener("dblclick", function(){
    document.getElementById("name").value = "Hello World!";
});

document.getElementById("name").onchange = function() {
    document.getElementById("send").disabled = false;
}
<input id="name" type="text">
<input type="submit" id="send" value="Submit" disabled>

you can do like this ...

document.getElementById("name").onchange = function() {
    document.getElementById("send").disabled = false;
}

document.addEventListener("dblclick", function(){
    document.getElementById("name").value = "Hello World!";
    if ("createEvent" in document) {
        var evt = document.createEvent("HTMLEvents");
        evt.initEvent("change", false, true);
        document.getElementById("name").dispatchEvent(evt);
    }
    else
        document.getElementById("name").fireEvent("onchange");
});
<input id="name" type="text">
<input type="submit" id="send" value="Submit" disabled>

HTMLElement: change event, Unlike the input event, the change event is not necessarily fired for each alteration to an element's value . Bubbles, Yes. Cancelable, No. Interface  Event: input. The input event triggers every time after a value is modified by the user. Unlike keyboard events, it triggers on any value change, even those that does not involve keyboard actions: pasting with a mouse or using speech recognition to dictate the text.

You can create an event to dispatch on the element on document dblclick. Also use oninput instead of onchange like the following way:

document.addEventListener("dblclick", function(){
  document.getElementById("name").value = "Hello World!";

  var event = document.createEvent('Event');
  event.initEvent('input', true, true);
  document.getElementById("name").dispatchEvent(event);
});

document.getElementById("name").oninput = function() {
  document.getElementById("send").disabled = false;
}
<input id="name" type="text">
<input type="submit" id="send" value="Submit" disabled>

HTMLFormElement: submit event, Note: Trying to submit a form that does not pass validation triggers an invalid event. In this case, the validation prevents form submission, and  HTML input validation is done automatically by the browser based on special attributes on the input element. It could partially or completely replace JavaScript input validation. This kind of validation can be circumvented by the user via specially crafted HTTP requests, so it does not replace server-side input validation.

Normally properties modified by javascript do not trigger html change events.

So what you can do is call the code that activates your button from the change handler and the doubleclick handler. If the code was more complex you could wrap it in a function and call it from both handlers.

document.addEventListener("dblclick", function(){
    document.getElementById("name").value = "Hello World!";
    document.getElementById("send").disabled = false;
});

document.getElementById("name").onchange = function() {
    document.getElementById("send").disabled = false;
}

Events: change, input, cut, copy, paste, The change event triggers when the element has finished changing. For instance, while we are typing in the text field below – there's no event. input type = " text " onchange = " alert(this.value) " > < input type = " button  Thank you for the speedy reply! Your response reminded me of the attr property, so setting up the field as type: 'text' with the attr: {type: 'hidden'} creates a DOM element, and this works with triggering the dependent, while still having the field hidden from the get go, and not having to make any additional api calls to hide it!

Changing input values dynamically needs explicit event generation.

var el = document.getElementById('name') el.value = 'something'; el.dispatchEvent(new Event('change'));

Jsbin link

No onChange event triggered when changing value using javascript , because assigning value doesn't trigger an input event. believes that there are errors even though the required fields do have a value. component, and when I need to change a value from an external source, i update the  However, let’s assume that we have just executed and AJAX request to populate the fields of our form and the select box has been dynamically set to no. Those of you with any JavaScript experience will know that this does not trigger the onchange event, because no user interaction has taken place with that select box. Instead, to update our UI, we need to trigger that event in order to disable the email address field.

Did you try adding the onchange method to your initial function?

For example:

     document.getElementById("name").onchange = function() {
    document.getElementById("send").disabled = false;
}

document.addEventListener("dblclick", function(){
    document.getElementById("name").value = "Hello World!";
    if ("createEvent" in document) {
        var evt = document.createEvent("HTMLEvents");
        evt.initEvent("change", false, true);
        document.getElementById("name").dispatchEvent(evt);
    }
    else
        document.getElementById("name").fireEvent("onchange");
});

SCR19: Using an onchange event on a select element without , HTML and XHTML with support for scripting. Success Criterion 3.2.2 (On Input) This technique will not cause a change of context. in the country select are modified using JavaScript via the Document Object Model (DOM). variable which contains the list of countries for each continent in the trigger select element​. <input type="hidden" onchange="some function"> Is it possible to trigger the some function from a hidden field? I tried to change the value by javascript and call focus(), blur in order, seems nothing happen, fro m W3c, it does not say that the hidden field can not trigger onchange, Is it possible?

oninput Event, Execute a JavaScript when a user writes something in an <input> field: is that the oninput event occurs immediately after the value of an element has changed, In HTML: <element oninput="myScript">. Try it Yourself ». In JavaScript: Note​: The addEventListener() method is not supported in Internet Explorer 8 and  We are using Pega 7.1.9 version. We observed that the edit inputs are not working . Ideally the value should be transformed as soon as we blur out of the field. This is also causing the edit validate not to be triggered. Is this a known issue? Thanks in advance ***Updated by moderator: Lochan to update Categories***

Angular ng-change Directive, It will not wait until all changes are made, or when the input field loses focus. The ng-change event is only triggered if there is a actual change in the input value,  How to allow browser to "remember" textfield values? Most browsers have a convience feature that "remembers" the last value(s) entered into a textfield. I've noticed that the Extjs 4 xtype: 'textfield' field I've been using do not trigger this browser feature.

jQuery trigger() Method, Trigger the select event of an <input> element: to the triggerHandler() method, except that triggerHandler() does not trigger the default behavior of the event. When attaching datetimepicker directly to the element, selecting a date will trigger the onchange() event of the as it should, however the datetimepicker doesn't work correctly (see #155 ) However when attaching datetimep

Comments