Fire onchange event for TextBox when readonly is true

Question

I am trying to have some functionality on change of a textbox which is readonly. But when I am trying to update the textbox using javascript, the change event is not firing for the textbox.

<script type="text/javascript">
        $(document).ready(function () {
            $('input[id$=_txtTest]').bind("change", function () {
                alert("test");
            });
                        });
        function ChangeText() {
            $('input[id$=_txtTest]').val('hello');
         }
    </script>

I am calling ChangeText method on click of a button. But it is not firing the textchange event for the textbox.

Can anybody tell me what is wrong here?

Possible duplicate: http://stackoverflow.com/questions/3600680/input-textbox-onchange-is-not-firing-when-data-is-assigned-to-input-textbox?rq=1 — Aleksander Blomskøld, Jan 15 '13 at 07:34
Also duplicate with: http://stackoverflow.com/questions/4672505/why-does-the-jquery-change-event-not-trigger-when-i-set-the-value-of-a-select-us — Christiaan Westerbeek, Jan 15 '13 at 07:37
You have readonly set to true on the input box? Does the value actually change to 'hello' when you call ChangeText? — Christiaan Westerbeek, Jan 15 '13 at 07:39

score 9 · Accepted Answer · answered Jan 15 '13 at 07:40

Well you have to do this way: http://jsfiddle.net/kmvSV/1/

 $(document).ready(function () {
   $('input[id$=_txtTest]').bind("change", function () {
     alert($(this).val());
   });
   $('button').bind("click", function () {
     $('input[id$=_txtTest]').val('hello').trigger('change');
   });
 });

Christiaan Westerbeek · Answer 2 · 2022-12-13T14:11:15.247

4

The change event is triggered by real user events only, not javascript actions.

You may trigger the change event, like so:

$('input[id$=_txtTest]').val('hello').change();

edited Dec 13 '22 at 14:11

answered Jan 15 '13 at 07:33

Christiaan Westerbeek

10,619
13
64
89

score 2 · Answer 3 · answered Jan 15 '13 at 07:33

you can do like this

function setValueOfTextBox()
{
    var myElement = document.getElementById("textboxid");
    myElement.value = "hello";
    //following code fire change event for you text box
    if (myElement.onchange) 
         myElement.onchange();
}

score 0 · Answer 4 · answered Oct 28 '19 at 23:59

0

I believe that for some security reason, the events are not fired. But you can achieve this by triggering the specific event on that element. E.g. $('input[id$=_txtTest]').trigger('change');

I hope this helps someone.

answered Oct 28 '19 at 23:59

jking

194
2
9

score 0 · Answer 5 · answered May 02 '21 at 04:22

`onkeypress` event or one of the several other events:

Since the read-only field doesn't really change; the onChange event doesn't trigger on it. However; there are several other events that you can listen to.

Here's a short demo:

input {
  font-size: 16px;
  line-height: 30px;
  padding: 3px;
  border: 2px darkblue solid;
}

<script>
function sayHi(evt) {

  alert('Are you tyring to edit a read-only? Click OK for details.')
  alert(JSON.stringify({
    keyCode: evt.keyCode, 
    charCode: evt.charCode, 
    altKey:evt.altKey, 
    ctrlKey: evt.ctrlKey, 
    shiftKey: 
    evt.shiftKey
  }), null, 2);
}
</script>



<input onkeypress="sayHi(event);" readonly placeholder="A readonly field..." />

Fire onchange event for TextBox when readonly is true

5 Answers5

`onkeypress` event or one of the several other events:

Linked

Fire onchange event for TextBox when readonly is true

5 Answers5

onkeypress event or one of the several other events:

Linked

`onkeypress` event or one of the several other events: