jQuery檢測表單改動 隱藏域hidden 觸發onchange事件

 

需求：要作一個草稿保存功能，點擊保存時，若表單數據有改動，則用ajax提交處處理程序，無數據改動裏，提示無數據更新，無須保存，不提交。

解決思路：使用jquery給表單的每個元素加上change監聽事件，當值發生變化時，用data()方法在表單保存一個表單修改的標識

當用戶提交的時候根據表單保存的標識判斷表單的內容是否有更新，成功提交後，重置標識

對於隱藏域hidden沒法觸發onchange的解決方法：在更改此隱藏域的時候，調用下它的onchange方法，使用jquery的話， 就直接加上 $("#hiddenid").change();

實現頁面只有一個表單 id 爲form，有若干input,編輯器

$(document).ready(function() { //監聽表單input元素的值變化

$(":input").change(function (){ $('#form').data('changed',true); }); //若是使用到編輯器，請調用編輯器中的監聽方法

//我在項目中在一個textarea中綁定了百度的編輯器

//這裏的處理是，認爲只要在編輯器中有鍵盤操做就有更新，此作法不夠精確

editor.addListener('keyup',function(){ $('#form').data('changed',true); }); }); //提交前作判斷

if(!$('#form').data('changed')) { alert('公告無更新，無需保存'); return false; } //成功提交處理後重置修改標識 $('#form').data('changed',false);

在使用過程當中，最重要的步驟是處理隱藏域和編輯器

 

總結：對於隱藏域hidden沒法觸發onchange的解決方法：在更改此隱藏域的時候，調用下它的onchange方法，使用jquery的話， 就直接加上 $("#hiddenid").change();

若是給表單添加了change事件，那麼hidden表單的值變化了以後主動調用change()函數便可。

來源：http://blog.sina.com.cn/s/blog_7cc04ac801012an3.html