CODEWITHSUNDEEP
javascripthtmljqueryforms
Tonald Drump
Tonald Drump

Reputation: 1376

Detect change in form

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:

$('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>

Upvotes: 3

Views: 3389

Answers (2)

Swati
Swati

Reputation: 28522

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>

Upvotes: 4

AliD32
AliD32

Reputation: 111

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

Upvotes: 1

Related Questions