Question

I have a ASP.NET form and it has a bunch of user inputs, text boxes, checkboxes, etc. I need to be able to check if the user has made an edit on the form without saving and if so prompt then beforeunload.

I have a dirty flag that set once the user edits one of the text boxes. If they save the data on the form then I reset the flag. Therefore the flag should only ever be set when the user edits but has not saved.

I then use this flag to decide whether or not to prompt the user “Are you sure you want to leave this page?”

Code snippet:

var _isDirty = false;

    $(function () {
        try {
                $("#MainContent_txtSometextBox").change(function () {
                    _isDirty = true;
                });
            } catch (e) { }
        });

The problem is I don’t want to have to set this on every control. Is it possible to set it at a page level? I don’t think it will be that easy as we also have custom user controls on the page.

Answer 1

You could pass a different selector

$("input, select, textarea").change(function () {
    _isDirty = true;
});

you may extend this as needed.

If you need to restrict it, wrap it in a div, then find.

$("#myForm").find("input, select, textarea").change(function () {
    _isDirty = true;
});