CODEWITHSUNDEEP
javascriptjqueryhtml
Yosra Nagati
Yosra Nagati

Reputation: 790

How to detect the change on input when it changed dynamically

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>

Upvotes: 7

Views: 15373

Answers (5)

bagher
bagher

Reputation: 7

use this in txt2

 oninput="changeClass(txt2);"

and in script

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

Upvotes: 0

myf
myf

Reputation: 11313

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>

Upvotes: 1

Ehsan
Ehsan

Reputation: 12969

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>

Upvotes: 2

Sufian Saory
Sufian Saory

Reputation: 892

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();"/>

Upvotes: 3

Kodie Grantham
Kodie Grantham

Reputation: 2041

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/

Upvotes: 7

Related Questions