Disabled Textbox Change Event

July 31, 2023 Post a Comment

Short Explanation I want to do something whenever disabled textbox value is changed Detailed Explanation I have a disabled text box which value is setting programitically I want to

Solution 1:

assuming that your your input has disable class on on click or something else you check like this

if ($( "#input" ).hasClass( "disable" )) {
Your logics and codes here //


}

//Hope this would help

Solution 2:

You can use triggerfor a change event:

<inputtype="text" disabled="disabled" name="fname"class="myTextBox" ><br>
<inputtype="button" name="submit"id="submit" value="Submit">

Javascript:

$(".myTextBox").change(function(){
  console.log("yes i m working");
});

$("#submit").click("input", function() {
     $(".myTextBox").val("New value").trigger("change");
});

Check Demo

Solution 3:

It is possible if one redefines the value property of that input.

<html><head><script>functionInit(){
                var tE = document.querySelector('input'); //Our input field.//We redefine the value property for the input
                tE._value = tE.value;
                Object.defineProperty(tE, 'value', {
                    get: function(){returnthis._value},
                    set: function(v){
console.log(1, 'The value changed to ' + v)
                        this._value = v;
                        this.setAttribute('value', v) //We set the attribute for display and dom reasons//Here we can trigger our code
                    }
                })
            }

            functionTest(){
                //In one second we are going to change the value of the inputwindow.setTimeout(function(){
                    var tE = document.querySelector('input'); //Our input field.
                    tE.value = 'Changed!'console.log(0, 'Changed the value for input to ' + tE.value)
                }, 1000)
            }
        </script></head><bodyonload = 'Init(); Test();'><inputtype = 'text'disabled = 'true'value = 'Initial' /></body></html>

https://jsfiddle.net/v9enoL0r/

Solution 4:

The change event will not fire if you change the value programmatically

See https://stackoverflow.com/a/7878081/3052648

A not elegant possible solution:

functioncheckChanges(){
    if(prevRate != $('#Rate').val()){
        prevRate = $('#Rate').val();
        alert('changed');
    }
}

var prevRate;
$(document).ready(function(){
    prevRate = $('#Rate').val();
    setInterval(function(){
        checkChanges();
    } ,500);
});

Solution 5:

You can fire change event by the following code from wherever you want to fire change event or any other event. The event will be fired either value changed or not. Just place the code after from where you are changing value programatically.

element.dispatchEvent(newEvent('change'))

let input = document.querySelector("input");
input.addEventListener("change", () =>alert("Change Event is Fired"));
input.value = "xyz";
input.dispatchEvent(newEvent("change"));

<inputtype="text"disabledvalue="abc">

JavaScript Lib