But today what I am going to share is a real world scenario of how jQuery helped me in observing change in any input element of page.
Usually, we have requirement on web form that when users presses a cancel button after entering any information on page then we have to prompt a cancel confirmation dialog like:
along with some script:
So what it does is that whenever users enters any text in text input element or change the value of dropdown then it will fire the method SetChangeVariable() which will set value of isChanged to true, which means we need to show cancel confirmation dialog.
Now imagine if I have a page with more than 20-30 fields then I have to go and manually wire the onchange method. Let’s see what jQuery and CSS together offers to us.
Suppose that we have a CSS class element
Then we will assign each element class “TrackChange” that needs to be taken care of as in code snippet below:
What above code does is that when document is ready, that’s what $(document).ready does, its going to select all elements with class assigned “TrackChanged” through one of its selector $(“.TrackChange”) and wired up event of change and set global variable isChanged to true. That’s it!
If you don’t like assigning CSS class, another great thing you can do with jQuery is to wire change event on all input elements using input selector:
and no need to assign any CSS class! Isn’t that amazing?
That is all for today. Happy Coding!