Detect change in form

Question

I have a <form> and need to detect if anything therein was changed when it is submitted.

My idea was the following: upon loading the form, I'd save its content's .html() as a string in the form's .data() attribute. Unfortunately, changes do not show up when the form is submitted (please look at the snippets console).

A few things to consider:

I need to know if the content is actually different, not just whether something was changed but then changed back
The form has a LOT of different and dynamic elements, so while extracting the information via .val(), .prop('checked'), etc. is possible, I'd really rather compare two strings

$('form').data('data', {oldState: $('form').html()});

$('form').on('submit', e => {
  
  e.preventDefault();
  
  var oldState = $('form').data('data').oldState;
  var currState = $('form').html();
  
  console.log(oldState);
  console.log(currState);
  console.log(oldState == currState);
  
  if(oldState == currState) {
    $('body').append('<p>same!</p>');
  } else {
    $('body').append('<p>changed!</p>');
  }
  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <input type="text" value="Old text">
  <input type="checkbox" checked>
  <button>Save</button>
</form>

Duplicate of Generic way to detect if html form is edited.

Dan Dascalescu
– Dan Dascalescu

2024-04-11 21:20:14 +00:00
Commented Apr 11, 2024 at 21:20 — Dan Dascalescu
– Dan Dascalescu, Commented Apr 11, 2024 at 21:20

Swati · Accepted Answer · 2020-05-15 07:10:00Z

4

You can use serialize() to check if the input value in form are same or not and then compare two string .Like below :

//getting all data in form 
var data = $('form').serialize();
$('form').on('submit', e => {

  e.preventDefault();
  var currState = $('form').serialize();
  console.log(data == currState);

  if (data == currState) {
    $('body').append('<p>same!</p>');
  } else {
    $('body').append('<p>changed!</p>');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form>
  <input type="text" name="t" value="Old text">
  <input type="checkbox" name="t1" checked>
  <button>Save</button>
</form>

answered May 15, 2020 at 7:10

Swati

28.5k4 gold badges26 silver badges45 bronze badges

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

1 Comment

Tonald Drump Over a year ago

Thank you, this is exactly what I was looking for :)

AliD32 · Accepted Answer · 2020-05-15 07:01:46Z

You don't say why you want to check values in submit, if you want to validate something maybe you should look at jquery validation, or you can use KnockoutJs to bind inputs and it observe change of it

If you don't want to use any library you should save your data in js object and then in submit save it again and compare two js object not html:

let oldState = getFormData();

$('form').on('submit', e => {  
  e.preventDefault();
  
  let currState = getFormData();
  let res = isSame(oldState, currState);
  
  console.log(oldState);
  console.log(currState);
  console.log(res);
  
  if(res)
    $('body').append('<p>same!</p>');
  else
    $('body').append('<p>changed!</p>');
});

function getFormData(){
  return {
    username: $("#username").val(),
    remember: $("#remember").prop('checked')
  };    
}

function isSame(obj1, obj2){
  return JSON.stringify(obj1) === JSON.stringify(obj2);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form>
  <input id="username" type="text" value="Old text">
  <input id="remember" type="checkbox" checked>
  <button>Save</button>
</form>

In getFormData you can add one class to all same type inputs and check it all in here, for example add .input-box to all textboxes and use something like this:

let res = {};
$(".input-box").each(function(i, b){
    res[b.id] = b.value;
});
//Add other fields to res
...

In isSame if you dont have any dom element or method you can compare objects just with JSON.stringify

Thanks, but this requires me to write custom code for each element and I do not know the contents of the form in advance :)

Collectives™ on Stack Overflow

Detect change in form

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related