CODEWITHSUNDEEP
jquery
Shano
Shano

Reputation: 361

Detect input value change made by jQuery function

So I have a function that changes the value of a hidden input field which happens in an included .jsp.

In the parent .jsp I want to detect a change to this value but it's not working however I try it.

See example in jsfiddle.

http://jsfiddle.net/3kxzvw5q/6/

$("input").change(function () {
    alert("input changed, calling registerChange");
    registerChange();
}); 

function registerChange(){
    $("#fieldsChangedIndicator").val('true');
}

$("#fieldsChangedIndicator").change(function() {
    alert("called");
});

The reason I don't want to perform the action immediately when the change is registered is because I want the action to be performed within the parent jsp.

EDIT: Updated the jsFiddle to a more descriptive example

Upvotes: 0

Views: 3403

Answers (4)

T.J. Crowder
T.J. Crowder

Reputation: 1074335

Overview

In reply to my question on your question, you said:

I'm trying to detect changes made to the value via code.

There is no event triggered when that happens. You either have to trigger one, or poll, or don't worry about the change until/unless you have to (your use case doesn't seem to allow this third option).

Triggering your own event

If you control the code setting the value, jQuery makes it easy to trigger and handle your own events. When setting the value:

$("#someField").val("newValue").trigger("code-change");

To handle the change:

$("some relevant selector").on("code-change", function() {
    // Handle it here
});

Although you can trigger the change event (just change the name above), beware unintended consequences if code handling the event may be expecting a real end-user event.

(function() {
  "use strict";
  
  // Watch for 'change'
  $("input").on("change", function() {
    display("Saw 'change'");
  });
  
  // Watch for 'code-change'
  $("input").on("code-change", function() {
    display("Saw 'code-change'");
  });
  
  // Watch for either
  $("input").on("change code-change", function() {
    display("Saw either 'change' or 'code-change'");
  });
  
  // Change it on button press
  $("#btn-change").on("click", function() {
    var el = $("#theElement");
    var val = el.val();
    switch (val.length) {
        case 0:
          val = "some value";
          break;
        case 1:
          val = val + val;
          break;
        default:
          val = val.substring(1) + val.substring(0, 1);
          break;
    }
    el.val(val).trigger("code-change");
  });
  
  function display(msg) {
    $("<p>").html(String(msg)).appendTo(document.body);
  }
})();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>Experiment with changing the value as a user (remember to leave the field), and with changing it using the button.</p>
<div><input id="theElement" value="Initial value" type="text"></div>
<div><input id="btn-change" type="button" value="Change It"></div>

Polling

If you're dealing with code you don't control that's setting the value, your only real alternative for "proactive" notification is to poll (blech). Mind you, polling every (say) 100ms offers reasonable responsiveness without a lot of overhead unless you're checking a truly huge number of fields (which would raise the question of how the user was meant to deal with thousands and thousands of form fields).

Upvotes: 3

Ahmed MR-mody
Ahmed MR-mody

Reputation: 61

can use that simple code

$("input").change(function () {

alert("change input");

$("#fieldsChangedIndicator").val('true');

registerChange();

}); function registerChange(){

alert("change #fieldsChangedIndicator");

}

Or test that linke http://jsfiddle.net/3kxzvw5q/7/

Upvotes: 0

Victor
Victor

Reputation: 5121

try this:

$("input").on('input', registerChange); 

function registerChange(){
   $("#fieldsChangedIndicator").val('true');
}

Upvotes: 0

Alok
Alok

Reputation: 522

$("#fieldsChangedIndicator").change(function() {
    alert("called");
}
);

You haven't closed the change function in the fiddle:P

Upvotes: -1

Related Questions