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

Question

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>

note: you do have to click off of the input field to get the submit button to enable, if you are editing the input field by hand!! — NSK
– NSK, Commented Aug 16, 2018 at 17:50
It's not supposed to. developer.mozilla.org/en-US/docs/Web/Events/change — Joseph Webber
– Joseph Webber, Commented Aug 16, 2018 at 18:03

Kishor Gowda · Accepted Answer · 2018-08-16 18:15:15Z

2

Changing input values dynamically needs explicit event generation.

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

Jsbin link

answered Aug 16, 2018 at 18:15

Kishor Gowda

1181 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mamun · Accepted Answer · 2018-08-17 03:41:47Z

1

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>

edited Aug 17, 2018 at 3:41

answered Aug 16, 2018 at 18:09

Mamun

69k9 gold badges51 silver badges62 bronze badges

Comments

Kunal · Accepted Answer · 2018-08-16 18:00:30Z

0

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>

answered Aug 16, 2018 at 18:00

Kunal

2292 silver badges9 bronze badges

Comments

James · Accepted Answer · 2018-08-16 18:00:10Z

0

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;
}

answered Aug 16, 2018 at 18:00

James

22.4k5 gold badges30 silver badges44 bronze badges

Comments

JKimbrough · Accepted Answer · 2018-08-16 18:30:40Z

0

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");
});

edited Aug 16, 2018 at 18:30

answered Aug 16, 2018 at 17:56

JKimbrough

2361 silver badge8 bronze badges

Comments

brk · Accepted Answer · 2018-08-16 18:06:16Z

-1

Use oninput instead of change

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


<input id="name" type="text">
<input type="submit" id="send" value="Submit" disabled>

DEMO here

edited Aug 16, 2018 at 18:06

answered Aug 16, 2018 at 17:59

brk

50.3k10 gold badges59 silver badges85 bronze badges

Collectives™ on Stack Overflow

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

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related