Disabled Textbox Change Event

July 18, 2022 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:

<input type="text" disabled="disabled" name="fname" class="myTextBox" ><br>
<input type="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>
            function Init(){
                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(){return this._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
                    }
                })
            }

            function Test(){
                //In one second we are going to change the value of the input
                window.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>

    <body onload = 'Init(); Test();'>
        <input type = 'text' disabled = 'true' value = 'Initial' />
    </body>
</html>

https://jsfiddle.net/v9enoL0r/

Baca Juga

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:

function checkChanges(){
    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(new Event('change'))

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

<input type="text" disabled value="abc">

javascript spravka