jQuery detect input change

Question

I'm working on a feature where the user needs to be informed that there are unsaved changes in a form in case if they decide to navigate away from the page.

I am almost done but there's a tiny problem-

I am setting a boolean dirty on input change event.

The .change() event will detect any kind of change, as in it doesn't keep track of changes. For example, if an input field has the original value hello, which is modified to bye and back to hello, it will still set the dirty boolean.

Is there any way where I can take a backup of the form with initial values and then compare it with itself at every change event?

I think you've to store each initial input values and compare them with the new changement and if it's different only put dirty as true. — Alexis, Sep 04 '17 at 07:55
Save original value in `hidden fields` and check with current values when user tries to navigate away? — Lwin Htoo Ko, Sep 04 '17 at 07:55

score 0 · Answer 1 · answered Sep 04 '17 at 08:02

You need a way to serialize the form data into a JSON object, and then you could either compare the JSON object by iterating the properties or by comparing the JSON.stringify values.

I have slightly modified the method of objectifying the form data from here in order to do this.

var form = document.getElementById("myForm");
var originalFormData = objectifyForm(form);
var originalFormDataString = JSON.stringify(originalFormData);

setInterval(function() {
  var formData = objectifyForm(form);
  var formDataString = JSON.stringify(formData);
  console.log("Form is dirty: " + (formDataString != originalFormDataString));
},1000);

function objectifyForm(formArray) {//serialize data function

  var returnArray = {};
  for (var i = 0; i < formArray.length; i++){
    returnArray[formArray[i]['id']] = formArray[i]['value'];
  }
  return returnArray;
}

<form id="myForm">

  <input id="myInput" value="test" type="text" />
</form>

score 0 · Answer 2 · answered Sep 04 '17 at 08:19

You can do something like this. Remember this solution is just a sample. You have multiple input element, than use array/object to save there defaultValue.

 var defaultValue = document.getElementById("myText").defaultValue;//Get the default value

 var handleChange = function (){
    let value =  document.getElementById("myText").value;//get the current value
    if(defaultValue===value){
       console.log("dirty false")
    }else {
       console.log("Dirty True")
    }
 
 }

<input type="text" id="myText" value="abc" onkeyup="handleChange()">

Tomonso Ejang · Answer 3 · 2017-09-04T08:13:23.827

-1

I think you can create a javascript empty initial_values = {} object. initialised it with the default values in the form of key:value pairs. and if dirty boolean is set, it can be used to compare later on.

edited Sep 04 '17 at 08:13

answered Sep 04 '17 at 08:01

Tomonso Ejang

1,336
3
15
27

jQuery detect input change

3 Answers3