Waiting until HTML input element gets a value

Question

I have one HTML input element.

<input type = "hidden" name = "MY_ELEMENT" id = "MY_ELEMENT" />

The element is not having any value initially.

There is one JavaScript function which will set the value of the input element. I want to execute another JavaScript function the moment the input element gets the value. It is certain that the said element will get some value but that can take some time.

I tried using the while loop but that made the page unresponsive. I want the function anotherJSFunction() to run after the input element gets some value.

while(document.getElementById("MY_ELEMENT").value == "") {
    console.log('Waiting for the element to get some value.');
}

anotherJSFunction();

Please suggest some alternatives for this problem.

Here's another answer for similar question: [Detecting input change in jQuery?](https://stackoverflow.com/a/25453163) — Nisarg Shah, Apr 13 '18 at 06:55
@Nisarg I don't think that this is a duplicate of the indicated question.. From the quick tests I did, `oninput` and `onchange` (as suggested by the accepted answer in the linked question) never fired when the value of the input was programmatically changed — Chirag Ravindra, Apr 13 '18 at 12:01
@ChiragRavindra you can simply trigger the event from code using something like: `$("#MY_ELEMENT").trigger("change");`. Or better, they can simply invoke the function `anotherJSFunction()` after setting the value. — Nisarg Shah, Apr 13 '18 at 12:16
Yes, but if we are closing a question as a duplicate, the question should be answered completely by the marked question.. It may not be obvious to a new comer that triggering an event on an element is an option.. I'm only bringing this up because the issue of an input being set programmatically (which is the original intent of this question) not triggering this event is actually a comment on the accepted answer to which there was no reply :) — Chirag Ravindra, Apr 13 '18 at 12:20
@ChiragRavindra I understand. I had missed the part of programmatically setting the input. But in general, a question can be closed with multiple duplicates. — Nisarg Shah, Apr 13 '18 at 14:24
@Quentin Can you add the following question as another duplicate: https://stackoverflow.com/q/2856513/5894241 ? — Nisarg Shah, Apr 13 '18 at 14:25

Mr Hery · Answer 1 · 2018-04-13T07:14:23.887

-1

You created the wrong function. Theres some way to do that.

Use the onkeyup or onchange event on the HTML

<input onchange="myFunction()" /> or <input onkeyup="myFunction()" />

Create an eventListener for that element in JS:

document.getElementById("My_Element").addEventListener("change", function(){ //Do something });
If you re using JQuery, you may simply do like this:

$("#My_Element").on("keyup", function(){ //do something })

Edit

The form is hidden. I think you may do this:

function hiddenValue(){
    var hvalue = "some_value";
    document.getElementById("hiddenForm").innerHTML = '<input type="hidden" value="' + hvalue + '" name="element" id="element" />';

    //Call another function:
    //Or you can pass the value to the function like thid:
    //doSomething(hvalue);
    doSomething();
}

function doSomething(hvalue = ''){
    //do in here
}

In the HTML, just put div or span with id="hiddenForm"

edited Apr 13 '18 at 07:14

answered Apr 13 '18 at 07:00

Mr Hery

829
1
7
25

Firstly, the input element is of the type **hidden**. Secondly, as I have mentioned in the question, the value will get set by a JavaScript function and that can take some time. The flow of JavaScript that I have put in place is not stopping and that is why I tried using **while loop** so that flow can be paused until the input element gets the value. – Salil Raj Apr 13 '18 at 07:07
If it was hidden, then you dont need to create the form there or the form should be created in the JS function that generate the hidden value. If the function that create the value is in JS, then you just can call another function in the hidden value function. – Mr Hery Apr 13 '18 at 07:09

Chirag Ravindra · Answer 2 · 2018-04-13T07:14:42.750

Perhaps using a custom setter and getter might help.

var el = document.getElementById('my-element');
el._value = el.value;
Object.defineProperty(el, "value", {
    get: () => this._value,
    set: (newValue) => {
        console.log('Set: ' + newValue);
        // The value has been changed, do things here
        this._value = newValue;
    }
});

// This is to simulate the input's value being programmatically set at a later time
setTimeout(() => {
  el.value='100'
  console.log('Value programmtically updated: ' + el.value);
},2000);

<input type="hidden" id="my-element" />

Waiting until HTML input element gets a value

2 Answers2

Edit