Set flag false if data not changed in form

Question

I have used the code from reference Generic way to detect if html form is edited

$.fn.extend({
    trackChanges: function () {
        $(":input", this).change(function () {
            $(this.form).data("changed", true);
        });
    },
    isChanged: function () {
        return this.data("changed");
    }
});

and using it like

$("#check").click(function () {
    $("#myform").trackChanges();
    if ($("#myform").isChanged()) {
        alert("changed");
    } else {
        alert("Not changed");
    }
});

But I dont understand how to catch the not changed event, whenever I click on button it is alerting changed, I need to catch the not changed event also. Control is not going to else part

HTML

<form id="myform">
    <input type="text" id="id1" />
    <select id="id2" ><option>1</option><option>2</option></select>
    <textarea>asdasd</textarea> 
    <input type="button" id="check" value="button"/>        
</form>

$.fn.extend({
    trackChanges: function () {
        $(":input", this).change(function () {
            $(this.form).data("changed", true);
        });
    },
    isChanged: function () {
        return this.data("changed");
    }
});

<form id="myform">
    <input type="text" id="id1" />
    <select id="id2"><option>1</option><option>2</option></select>
    <textarea>asdasd</textarea>
    <input type="button" id="check" value="button" />
</form>

<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script>
$(document).ready(function () {

    $("#myform").trackChanges();

    $("#check").click(function () {

        if ($("#myform").isChanged()) {
            alert("vam");
        } else {
            alert("no");
        }

    });
});
</script>

It makes little sense that you call the trackChanges method only when the button is clicked. You need to call it earlier, so that it actually gets a chance to listen to field changes _before_ you click the button. — CBroe, Nov 18 '16 at 11:26
I have placed trackChanges outside click function, but still it is calling changed alert only — vamsi, Nov 18 '16 at 11:31

score -1 · Answer 1 · edited Jun 20 '20 at 09:12

EDIT

please review this one

function check() {
  $("#myform").trackChanges();
  if ($("#myform").isChanged()) {
    alert("changed");
    //set flag to false again
    setData();
  } else {
    alert("Not changed");
  }
}

function setData() {
  var f = $('#myform'),
    inps = f.find(":input").not(":input[type=button]").toArray();
  f.data("changed", false);
  $.each(inps, function(i, elm) {
    var dval = $(this).val();
    $(elm).data("old", dval).data("temp", dval);
  })
}
setData();

//register onchange each input
(function() {
  $('#myform :input').change(function() {
    var self = $(this);
    self.data("temp", self.val());
  })
})();

$.fn.extend({
  trackChanges: function() {
    var self = this,
      inps = $(":input", self).not(":input[type=button]").toArray();

    inps.some(function(elm) {
      var d = $(elm);
      if (d.data("old") !== d.data("temp")) {
        $(self).data("changed", true);
        //console.log($(self))
        return true;
      }
      return false;
    })
  },
  isChanged: function() {
    return this.data("changed");
  }
});


$("#check").click(check);

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<form id="myform">
  <input type="text" id="id1" />
  <select id="id2">
    <option>1</option>
    <option>2</option>
  </select>
  <textarea>asdasd</textarea>
  <input type="button" id="check" value="button" />
</form>

For select box, when I change the option 1 to 2 and then 2 to 1, it is alerting changed, y? — vamsi, Nov 18 '16 at 11:42
weu, that case need to tract previous val of each input. let me try it — RizkiDPrast, Nov 18 '16 at 12:54

score -1 · Answer 2 · answered Oct 15 '20 at 19:00

Try using this, just added a line it might work.

   $.fn.extend({
        trackChanges: function() {
             /*this will give false during the call ischanged() if no changes is done on 
             the form */
             $(this.form).data("changed", false);             
             $(":input",this).change(function() {
             $(this.form).data("changed", true);});
        },
        isChanged: function() { 
             return $(this).data("changed"); 
            }
        });

Set flag false if data not changed in form

2 Answers2

EDIT