0

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

Improve this question
3
  • 1
    It's not clear what you want to do here. Do you want to detect changes made by the user to the field? If so, change will work, but doesn't usually fire until/unless the field loses focus. Or are you trying to detect changes made to the value via code? Commented Sep 23, 2014 at 14:03
  • 2
    Please note your JSFiddle is not the same as the code above. The much abused fix by Alok Bhat does correct that problem in the JSFiddle. Commented Sep 23, 2014 at 14:06
  • 1
    @T.J.Crowder I'm trying to detect changes made to the value via code. The changes made to the value are made by code also, when it detects change in another field Commented Sep 23, 2014 at 14:24

4 Answers 4

Reset to default
3

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).

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

try this:

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

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

1 Comment

"Try this" answers are rarely useful. Say what you changed, and why.
0

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/

Improve this answer

Comments

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

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

Improve this answer

5 Comments

While this is true (in the fiddle only, not the question), it's not likely to be the OP's real problem.
Actually, this is different. This is about the .change() call, not the function definition. But it's still wrong, because he has closed it with });.
It is not the same answer .. please look into the fiddle .. thanks
It still doesn't call the second change() function when you edit one of the first two fields. See jsfiddle.net/barmar/3kxzvw5q/2
Thought I'd fixed that, I just updated my jsFiddle now, and the problem still exists

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.