0


Somewhere in my page I have an button that when clicked changes the value of another input. However I don't have control over the code where the click event is defined (on a clients' CDN) and I didn't bother to look. I just want to capture the event when my inputs' value is change through the code. Here's an example:
HTML

<input type="text" id="myinput" />
<input type="button" id="theonechanging" value="Click Me" />
<br />
<p id="message"></p>

JS

var i = 0;
$("#theonechanging").click(function(e) {
    // YOU CAN NOT CHANGE THIS FUNCTION
    $("#myinput").val("changed via button " + i++);
});
$("#myinput").on("input change bind",function(e) {
    $("#message").text("changed " + i++);
});

Here's a fiddle where you can test the situation: http://jsfiddle.net/fourat05/t9x6uhoh/

Thank you for your help !

Fourat
  • 2,366
  • 4
  • 38
  • 53
  • possible duplicate of [jQuery detect programatic change to field](http://stackoverflow.com/questions/4200358/jquery-detect-programatic-change-to-field) – depperm Jul 23 '15 at 13:58
  • @depperm "Of course this will require the block of code responsible for updating the filed to make one of those calls after it has done its work." This is not my case – Fourat Jul 23 '15 at 14:01
  • see the other answers, the question is the same – depperm Jul 23 '15 at 14:02
  • @depperm it's either trigger the event from the changing function or setinterval and I can't do the first and don't want to do the second because it makes useless work and it might not work – Fourat Jul 23 '15 at 14:04

5 Answers5

1

There's an incredibly hacky way to do this.

What you do is replace the jQuery.fn.val function with your own implementation, and call the old implementation from the new one. This technique is a kind of Monkey patching.

The implementation is as follows:

var i = 0;
$("#theonechanging").click(function(e) {
    // YOU CAN NOT CHANGE THIS FUNCTION
    $("#myinput").val("changed via button " + ++i);
});

var handleChanges = function(){
    $("#message").text("changed " + i);
}

var oldval = jQuery.fn.val;
jQuery.fn.val = function(){
    oldval.apply(this,arguments);
    if(this.attr('id') === 'myinput'){ //and possibly add a check for changes
        handleChanges();
    }
}

$("#myinput").on("input change bind",function(e) {
    i++;
    handleChanges();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input type="text" id="myinput" />
<input type="button" id="theonechanging" value="Click Me" />
<br />
<p id="message"></p>

However, I strongly recommend against using it, because:

  1. This alters the behaviour of a widespread library, thus creating possible pitfalls for the developers producing code for the same page
  2. It will quickly become complicated to detect multiple events on multiple elements.

Please understand the side effects of this method before implementing it.

Yasa Akbulut
  • 381
  • 2
  • 6
0

Values changed directly in the DOM dont trigger those events, but since you have an action that is called to change the value, you can trigger the input change event.

$("#theonechanging").on("click", function(e) {
    $("#myinput").trigger("change");
});

fiddle

yoda
  • 10,834
  • 19
  • 64
  • 92
  • Well I tried that and it didn't work (it works on the fiddle) but when I do `console.log($("#theonechanging"))` I get a jquery object with length 0 – Fourat Jul 23 '15 at 14:37
0

use triggers

var i = 0;
$("#theonechanging").click(function(e) {
   // YOU CAN NOT CHANGE THIS FUNCTION
   $("#myinput").val("changed via button " + i++);
});
$("#theonechanging").on("click", function(e) {
    $("#myinput").trigger("change");
});
$("#myinput").on("input change bind",function(e) {
    $("#message").text($("#myinput").val());
});

Fiddle

Vinie
  • 2,983
  • 1
  • 18
  • 29
  • Well I tried that and it didn't work (it works on the fiddle) but when I do `console.log($("#theonechanging"))` I get a jquery object with length 0 – Fourat Jul 23 '15 at 14:37
0

I think it is not possible without changing the script for BUTTON.

When the user click the 'Button', you should trigger another function to catch the change in 'Input'.

If you don't want to change the 'Button' script, you can try something like the code below, seeking for the correct combination of events:

(check the list of events here: http://www.w3schools.com/tags/ref_eventattributes.asp)

<html>
<body>
<input type="text" id="myinput" onchange="change_Message('onchange')" 
                                onclick="change_Message('onclick')" 
                                oninput="change_Message('oninput')" 
                                onkeypress="change_Message('onkeypress')"/>

<input type="button" id="theonechanging" value="Click Me" onclick="change_Input()"/>
<br />
<p id="message"></p>

<script>

var input_value = document.getElementById('myinput').value; // as global variable

function Test_if_Change() 
{ 
    if ( document.getElementById('myinput').value != input_value ) 
    { 
        change_Message('Test_if_Change'); 
    } 
}

setInterval(Test_if_Changed, 10);

function change_Input() { document.getElementById('myinput').value = 'input changed by button'; }

function change_Message(event) { document.getElementById('message').innerHTML = 'message changed by '+event+' to: ' + document.getElementById('myinput').value; }

</script>

</body>
</html>
0

There is no perfect way to detect input value changes through code but if you you are using jquery ,you can hook the val function and trigger change event manually.

jQuery.fn._val = jQuery.fn.val;
jQuery.fn.val = function(){
   jQuery.fn._val.apply(this,arguments);
   if(arguments.lenght==1){
            this.trigger('code-change');
        }
    }
}
MSS
  • 3,520
  • 24
  • 29