How to detect the change on input when it changed dynamically

Question

How to detect the changes in input values when it is dynamically changed. as the change on txt2 clear the value in txt1 . I need to detect that it has cleared or changed.

Onchange does not do that.

<input id="txt1" type="text" onchange="SetDefault();" onpaste="this.onchange();" oninput="this.onchange();">
<br>



<input id="txt2" type="text" onchange="SetDefaultSecond();" onkeyup="this.onchange();" onpaste="this.onchange();" oninput="this.onchange();">

<script>
function SetDefault(){
      alert("Change1");
    }

function SetDefaultSecond(){
      $("#txt1").val('');
       alert("Change2");
}
</script>

I checked your code, typing in txt2 will erase txt1 but you need to use the jquery script(if you didnt invoke it) ,, — odai, Sep 07 '16 at 16:55
onchange is not fired when changed with JavaScript. You need to fire the event manually. — epascarello, Sep 07 '16 at 16:57
@odai I need to trigger that there is a change in value happened in txt1 — Yosra Nagati, Sep 07 '16 at 17:07
@epascarello yes exactly , I am trying to find a way to detect the change dynamcally — Yosra Nagati, Sep 07 '16 at 17:14
Possible duplicate of [Detect all changes to a (immediately) using JQuery](http://stackoverflow.com/questions/1948332/detect-all-changes-to-a-input-type-text-immediately-using-jquery) — myf, Sep 07 '16 at 17:21
There's no event for what you need (except `onpropertychange` in IEs, not useful in general though). Even [Mutation Observer](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver) can't be used (can detect attribute changes of an input only). Hence the only way left is to use a timed function to check, if a value has been changed. — Teemu, Sep 07 '16 at 17:32
@teemu you are right on propertychange does not make the work unfortunately . so you think I have to try to find another solution to this problem? — Yosra Nagati, Sep 07 '16 at 18:00
@myf you are right the question covers mine , however the answers does not work with me check that here http://jsfiddle.net/yosraNagati/fXnFF/2035/ — Yosra Nagati, Sep 07 '16 at 18:02
@YosraNagati The accepted answer, or the last snippet in Annabelle's answer in the post myf has linked is probably the way to go for you. I.e. execute a timed function to check, if any changes have happened. — Teemu, Sep 07 '16 at 18:04

score 6 · Answer 1 · answered Sep 07 '16 at 17:02

6

You can manually trigger the input event when you clear the first input like this:

<input id="txt1" type="text">
<br>
<input id="txt2" type="text">

<script>
$("#txt1").on("input", function() {
    alert("Change1");
});

$("#txt2").on("input", function() {
    $("#txt1").val('').trigger('input');
    alert("Change2");
});
</script>

jsFiddle here: https://jsfiddle.net/dr0oabj1/

answered Sep 07 '16 at 17:02

Kodie Grantham

1,963
2
17
27

It works but only for if it is empty val('') , I search for a way to detect the change in general as if the value is 4 and changed to be 6 ..etc – Yosra Nagati Sep 07 '16 at 17:12
@YosraNagati It works by emptying the value and then triggering a change. You can change the val('') to whatever you would want. Check out the answer here for a snippet to detect any and all input changes without triggering the event manually: http://stackoverflow.com/questions/1948332/detect-all-changes-to-a-input-type-text-immediately-using-jquery – Kodie Grantham Sep 07 '16 at 17:16
Actually this field on my project is changed from different sources dynamically , and I want to detect when it get changed. – Yosra Nagati Sep 07 '16 at 17:20
@YosraNagati Then the link in my last comment should be exactly what you're looking for. – Kodie Grantham Sep 07 '16 at 17:21
@YosraNagati now i get the point but it was not so clear from the question. in that case you need to use setInterval technique described in Kodie's link. – Sufian Saory Sep 07 '16 at 17:27

score 3 · Answer 2 · answered Sep 07 '16 at 17:02

3

you need to use oninput event to capture any change to an input. it triggers every time the value changes due to typing/pasting etc. difference between onchange & oninput is onchange only triggers after focus goes off the input where as oninput triggers every time values changes due to any reason.

function SetDefault(){
      alert("Change1");
    }

function SetDefaultSecond(){
      $("#txt1").val('');
       alert("Change2");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<input id="txt1" type="text" oninput="SetDefault();" />
<br>



<input id="txt2" type="text" oninput="SetDefaultSecond();"/>

answered Sep 07 '16 at 17:02

Sufian Saory

862
9
14

i see, you want the alert for txt1 when it's cleared by txt2 change. 1min plz – Sufian Saory Sep 07 '16 at 17:15
when it is changed generally , cleared or changed to another value – Yosra Nagati Sep 07 '16 at 17:17
oninput does not detect with val() is changed. – epascarello Sep 07 '16 at 17:23

score 2 · Answer 3 · answered Sep 07 '16 at 17:12

Try this :

$(document).ready(function(){

    $("#txt2").on("input",function(){

        $("#txt1").val('');
        console.log("Change2");

    })

    $("#txt1").on("input",function(){

        console.log("Change1");


    })
})

Final code :

<!DOCTYPE html>
<html lang="en">
<head>
</head>
    
    <body>
        
        Text 1 : <input id="txt1" type="text">
        <br><br>
        Text 2 : <input id="txt2" type="text">
        
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script>
        $(document).ready(function(){

            $("#txt2").on("input",function(){

                $("#txt1").val('');
                console.log("Change2");

            })

            $("#txt1").on("input",function(){

                console.log("Change1");


            })
        })
    </script>
    </body>
</html>

score 1 · Answer 4 · edited May 23 '17 at 11:54

Kodies answer is right; just try this ultra simple example and then proceed to Detect all changes to a (immediately) using JQuery

<input id="txt1" type="text" oninput="console.log('input')" onchange="this.oninput()">
<br>
<button onclick="eval(this.textContent)">console.log('clearing'); txt1.value=''</button>
<br>
<button onclick="eval(this.textContent)">console.log('clearing <b>and triggering</b>'); txt1.value=''; <b>txt1.onchange()</b></button>

score 0 · Answer 5 · answered Jul 27 '22 at 01:36

0

use this in txt2

 oninput="changeClass(txt2);"

and in script

function changeClass(text) {
    if(text.value==''){
        //code for clear txt1
    }
}

answered Jul 27 '22 at 01:36

bagher

7
2

How to detect the change on input when it changed dynamically

5 Answers5