Using jQuery, how can I find if a form has changed? [duplicate]

Question

I want to know if a form has changed at all. The form can contain any form element, such as input, select, textarea etc. Basically I want a way to display to the user that they have unsaved changed made to a form.

How can I do this using jQuery?

To clarify: I want to catch ANY change to the form, not only to input elements but to all other form elements as well, textarea, select etc.

@dfsq , if form modified ,and user clicks on CLOSE tab or goes to other page ,to alert him,that PLz save changes you made. — Pratik Joshi
– Pratik Joshi, Commented Nov 7, 2014 at 8:06
Please refer the following post stackoverflow.com/questions/3025396/jquery-form-change — user3275109
– user3275109, Commented Nov 7, 2014 at 8:09
Refer the following post stackoverflow.com/questions/3025396/jquery-form-change — user3275109
– user3275109, Commented Nov 7, 2014 at 8:13

dfsq · Accepted Answer · 2014-11-07 08:17:18Z

85

The approach I usually take in such a case is that I check serialized form value. So the idea is that you calculate initial form state with $.fn.serialize method. Then when needed you just compare current state with the original serialized string.

To target all input elements (select, textarea, checkbox, input-text, etc.) within a form you can use pseudo selector :input.

For example:

var $form = $('form'),
    origForm = $form.serialize();

$('form :input').on('change input', function() {
    $('.change-message').toggle($form.serialize() !== origForm);
});

.change-message {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
    <div class="change-message">You have unsaved changes.</div>
    <div>
        <textarea name="description" cols="30" rows="3"></textarea>
    </div>
    <div>Username: <input type="text" name="username" /></div>
     <div>
        Type: 
        <select name="type">
            <option value="1">Option 1</option>
            <option value="2" selected>Option 2</option>
            <option value="3">Option 3</option>
        </select>
    </div>
    <div>
        Status: <input type="checkbox" name="status" value="1" /> 1
        <input type="checkbox" name="status" value="2" /> 2
    </div>
</form>

edited Nov 7, 2014 at 8:17

answered Nov 7, 2014 at 8:11

dfsq

193k26 gold badges244 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Weblurk Over a year ago

Great answer. Quesiton though, why doesn't this work without serializing? I mean, is there a way to do this without serializing?

dfsq Over a year ago

Well you need a way to compare all form element values. I just found that serialization is very convenient way to do that. It's only one line of code. And this string only depends on input values, exactly what we need. It also properly work when user reverts changes. Serialized string also reverts to its original value.

Taufik Nur Rahmanda Over a year ago

This is a great solution! A better solution than here: stackoverflow.com/questions/3025396/… where they use data attribute, because solution like that is a one-way, once input changed, form will always stated as changed, while, this solution is two-way. If user input then deleting what he input, the form will not stated as changed because the serialize is matched. :) Doesn't it?

Gary Reckard Over a year ago

This works great! I had one issue where I had a tool that generated a random password and plopped it into the password fields, and that didn't register as a change... so I had to call .change() on those password fields after I updated their value (or you could call .trigger('change')), and it works great!

japes Sophey Over a year ago

Great simple solution. Top Answer!

Collectives™ on Stack Overflow

Using jQuery, how can I find if a form has changed? [duplicate]

1 Answer 1

5 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Linked

Related