change event not firing in hidden field jquery

Question

I have a hidden field 'Edit-WorkOrderId'.

  function fn_formCreated(event, data) {
        $("#Edit-WorkOrderId").change(function() {
            if ($(this).val() == "") {
                $("#Edit-ProductionStageId option[value='-1']").attr("selected", "selected");
                $("#Edit-ProductionStageId").attr("disabled", true)
                    .closest("div.jtable-input-field-container")
                    .removeClass("mandatory");
            } else {
                $("#Edit-ProductionStageId").removeAttr("disabled")
                    .closest("div.jtable-input-field-container")
                    .addClass("mandatory");
                fn_GetWorkOrderDeatils();
            }
        });
        if (data.formType == "create") {
            $("#Edit-WorkOrderId").trigger("change");
            fn_GetBusinessUnit();
        }
    }

The change event did not worked when the value changed. Thanks Advance.

`$("#Edit-WorkOrderId").on('input change', function() {` try with this. — Jai, Aug 05 '15 at 12:22
Refer to the following thread: http://stackoverflow.com/questions/6533087/jquery-detect-value-change-on-hidden-input-field — Rajan Goswami, Aug 05 '15 at 12:22
There isn't anything wrong with your code. Check your if statement. — ebilgin, Aug 05 '15 at 12:26
If fn_formCreated function called more than once, you don't wanna put change event in it. — ebilgin, Aug 05 '15 at 12:28

score 2 · Answer 1 · edited Feb 21 '16 at 14:48

2

You have to define the change event like below supposing Edit-WorkOrderId is the ID of the field

$('#Edit-WorkOrderId').on('change', function() {
    //do something;
});

function fn_formCreated(event, data) {
   // do something.
   if (data.formType == "create") {
        $("#Edit-WorkOrderId").trigger("change");
        fn_GetBusinessUnit();
   }
}

edited Feb 21 '16 at 14:48

rrk

15,677
4
29
45

answered Aug 05 '15 at 12:25

dpanshu

453
3
14

score 1 · Answer 2 · answered Aug 05 '15 at 12:24

You need to put the change binding in the $(document).ready(function{}) call.

$(document).ready(function () {
    $("#Edit-WorkOrderId").on('change',function () {
        if ($(this).val() == "") {
            $("#Edit-ProductionStageId option[value='-1']").attr("selected", "selected");
            $("#Edit-ProductionStageId").attr("disabled", true)
                .closest("div.jtable-input-field-container")
                .removeClass("mandatory");
        } else {
            $("#Edit-ProductionStageId").removeAttr("disabled")
                .closest("div.jtable-input-field-container")
                .addClass("mandatory");
            fn_GetWorkOrderDeatils();
        }
    });
})

function fn_formCreated(event, data) {
    if (data.formType == "create") {
        $("#Edit-WorkOrderId").trigger("change");
        fn_GetBusinessUnit();
    }
}

Jai · Answer 3 · 2015-08-05T12:38:08.157

Try something like this:

$('#Edit-WorkOrderId').on('input change', function() {
  if (this.value === '') {
    alert('no value');
  } else {
    alert(this.value);
  }
}).change();

setTimeout(function() {
  $('#Edit-WorkOrderId').val('newValue in timeout.').trigger('change');
}, 1000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='hidden' id='Edit-WorkOrderId' value=''>

You need to trigger the change whenever you are updating the value.

some notes:

You are binding change event in a function.
When you call this function it registers the change event only. does not fire it.
You need to put your change event inside doc ready.

Thank you @jai , It's working fine. – Karthik Arthik Aug 06 '15 at 07:18 — Karthik Arthik, Aug 06 '15 at 07:18

change event not firing in hidden field jquery

3 Answers3