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) <script src="ajax.googleapis.com/ajax/libs/jquery/1.12.4/…>,, — odai
– odai, Commented Sep 7, 2016 at 16:55
onchange is not fired when changed with JavaScript. You need to fire the event manually. — epascarello
– epascarello, Commented Sep 7, 2016 at 16:57
@odai I need to trigger that there is a change in value happened in txt1 — Yosra Nagati
– Yosra Nagati, Commented Sep 7, 2016 at 17:07
Possible duplicate of Detect all changes to a <input type="text"> (immediately) using JQuery — myf
– myf, Commented Sep 7, 2016 at 17:21
There's no event for what you need (except onpropertychange in IEs, not useful in general though). Even Mutation Observer 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
– Teemu, Commented Sep 7, 2016 at 17:32

Kodie Grantham · Accepted Answer · 2016-09-07 17:02:42Z

7

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 7, 2016 at 17:02

Kodie Grantham

2,0372 gold badges23 silver badges28 bronze badges

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

5 Comments

Yosra Nagati Over a year ago

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

Kodie Grantham Over a year ago

@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: stackoverflow.com/questions/1948332/…

Yosra Nagati Over a year ago

Actually this field on my project is changed from different sources dynamically , and I want to detect when it get changed.

Kodie Grantham Over a year ago

@YosraNagati Then the link in my last comment should be exactly what you're looking for.

Sufian Saory Over a year ago

@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 · Accepted Answer · 2016-09-07 17:02:42Z

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

i see, you want the alert for txt1 when it's cleared by txt2 change. 1min plz
when it is changed generally , cleared or changed to another value

Ehsan · Accepted Answer · 2016-09-07 17:12:56Z

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>

Community · Accepted Answer · 2017-05-23 11:54:40Z

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>

bagher · Accepted Answer · 2022-07-27 01:36:50Z

use this in txt2

 oninput="changeClass(txt2);"

and in script

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

Collectives™ on Stack Overflow

How to detect the change on input when it changed dynamically

5 Answers 5

5 Comments

3 Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

5 Comments

3 Comments

Comments

Comments

Comments

Linked

Related