Detect when a textbox changes value using jQuery

Question

I have a textarea on my asp.net mvc view and two buttons Save and Cancel. I want to check if user typed something in textarea but didnt click save and click cancel buttton. or click save button and then changed the text and didnt click save after change and click cancel. on cancel click I want to show alert but how can i check if user didnt click save after changing the text using jquery or javascript (perhaps in .change event or cancel click ) Please suggest

Is this your requirment - http://stackoverflow.com/questions/11844256/alert-for-unsaved-changes-in-form — ssilas777, Feb 13 '13 at 19:13

score 0 · Answer 1 · answered Feb 13 '13 at 18:48

0

You could have a hidden field that you set to some value when a user saves, then just check the hidden field for a value using jquery or javascript...

answered Feb 13 '13 at 18:48

Kixoka

989
4
15
37

score 0 · Answer 2 · answered Feb 13 '13 at 18:51

0

I would use onchange event with HTML5 localStorage

answered Feb 13 '13 at 18:51

score 0 · Accepted Answer · answered Feb 13 '13 at 19:18

Javascript:

<script>
$(function() {
    $("#TextAreaName").change(function() {
        $(this).attr("data-changed", true);
    });

    $("#Save").click(function(event) {
        event.preventDefault();

        if ($("#TextAreaName").attr("data-changed") === "true") {
            //Do your saving here

            //Reset the state
            $("#TextAreaName").attr("data-changed", false);
        }
    });
});

Razor markup

<body>
<div>
    @using (Html.BeginForm())
    {
        @Html.TextArea("TextAreaName", new{data_changed = false})

        <button id="Save" type="submit">Save</button>
        <button id="cancel" type="button">Cancel</button>
    }
</div>

I like the html5 data attributes option better, since there isn't a need for an additional element in the DOM — amhed, Feb 13 '13 at 19:20

Detect when a textbox changes value using jQuery

3 Answers3