Check if form field changes

Question

I have some form fields like <input>, <textarea>, <dropdown> etc.

If a user make a change in any form field it should be prompted at once that field is changed.

I applied different events like onKeyPress (did not work for backspace key), onChange (works when lose focus).

Is its not possible in simple/plain JavaScript then I want to know it in Dojo.

Answer 1

Through javascript attach event onFocus on input field. Onfocus setTimeout() and make it recursive. If any content will change, it will notify. In my case it works; even I did another task from it. I save existing input field value on page load. e.g it was abc on page load. User change it to abcd then there will be a message for unsave changes. But when user delete d and make it abc again then message will disappear, means there are no unsaved changes.

Answer 2

see stack question: Detect all changes to a <input type="text"> (immediately) using JQuery

while the accepted answer is using jquery setInterval works just fine with javascript. just use GetElementByID or GetElementsByTagName to get your input fields and then just check their values against themselves.

Answer 3

There is no HTML "dropdown" element, you probably meant a select.

For some controls you can compare a control's current value to its defaultValue to see if it's changed, pick whatever event suits for the control. For select, onchange is best and compare to the previously selected option (if there was one). Input and textarea you can likely use keyup. Radio buttons and checkboxes click and compare with the one that was checked previously (if there was one).