Search code examples
jquery-pluginsjquery

jQuery: alert if textarea changed


Could you recommend some lightweight jQuery plugin to detect if fields specified by selector have changed?

E.g. like this one on SO, showing confirmation dialog when I want to reload page during post edition.


Solution

  • This is too basic/specific a functionality to likely have its own plugin.

    All you need to do is store a boolean value that gets set to true if any element is changed:

    var changed = false;
    
    $(document).ready(function() {
        $('.watch-for-changes').change(function() {
            change();
        });
        window.onbeforeunload = function() {
            if (hasChanged()) {
                return "There are unsaved changes on the page.";
            }
        };
    }
    
    function change() {
        changed = true;
    }
    
    // use this to programmatically change an input field
    function changeValue(elField, value) {
        $(elField).val(value);
        change();
    }
    
    function hasChanged() {
        return changed;
    }
    

    Edit: previous use of onbeforeunload was incorrect. See this page for more details on its usage.