集標誌，如果假以形式

Question

沒有改變數據我已經從參考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"); 
    } 
}); 

使用的代碼，並使用它像

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

但我不知道如何捕捉到不改事件，每當我點擊按鈕時它警告改變，我也需要趕上沒有改變的事件。控制是不會到別的部分

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>

Answer 1

編輯

請查看這個

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>