JavaScriptはユーザーがフォームを修正したかどうかを判断する方法です.

本論文の例は、JavaScriptがユーザーがフォームを変更したかどうかを判断する方法を説明する.皆さんの参考にしてください.具体的な分析は以下の通りです.
このJSコードは、ユーザーがフォームの内容を変更したかどうかを判断し、フォームを変更してブラウザを終了すると、フォームの内容を保存するかどうかをユーザに警告する、非常に有用なコードです.

function formIsDirty(form) {
 for (var i = 0; i < form.elements.length; i++) {
  var element = form.elements[i];
  var type = element.type;
  if (type == "checkbox" || type == "radio") {
   if (element.checked != element.defaultChecked) {
    return true;
   }
  }
  else if (type == "hidden" || type == "password" ||
       type == "text" || type == "textarea") {
   if (element.value != element.defaultValue) {
    return true;
   }
  }
  else if (type == "select-one" || type == "select-multiple") {
   for (var j = 0; j < element.options.length; j++) {
    if (element.options[j].selected !=
      element.options[j].defaultSelected) {
     return true;
    }
   }
  }
 }
 return false;
}

使用例:ブラウザを終了した場合、フォームが変更された場合、ユーザーに保存するかどうかを通知します.

window.onbeforeunload = function(e) {
 e = e || window.event; 
 if (formIsDirty(document.forms["someForm"])) {
  // For IE and Firefox
  if (e) {
   e.returnValue = "You have unsaved changes.";
  }
  // For Safari
  return "You have unsaved changes.";
 }
};

以下は完全なサンプルコードです.

   Click on below button. Now change some values in form and click the button again. 
  
 
 
  
     
 
  
     
 
  
      
           foo 
           bar 
       
 
  
 
 
  
     Click to check if Form is Dirty 
  
 
 
  
  
  <br> function formIsDirty(form) { 
  <br>   for (var i = 0; i < form.elements.length; i++) { 
  <br>     var element = form.elements[i]; 
  <br>     var type = element.type; 
  <br>     if (type == "checkbox" || type == "radio") { 
  <br>       if (element.checked != element.defaultChecked) { 
  <br>         return true; 
  <br>       } 
  <br>     } 
  <br>     else if (type == "hidden" || type == "password" || 
  <br>              type == "text" || type == "textarea") { 
  <br>       if (element.value != element.defaultValue) { 
  <br>         return true; 
  <br>       } 
  <br>     } 
  <br>     else if (type == "select-one" || type == "select-multiple") { 
  <br>       for (var j = 0; j < element.options.length; j++) { 
  <br>         if (element.options[j].selected != 
  <br>             element.options[j].defaultSelected) { 
  <br>           return true; 
  <br>         } 
  <br>       } 
  <br>     } 
  <br>   } 
  <br>   return false; 
  <br> } 
  <br>  
 

本論文で述べたように、皆さんのjavascriptプログラムの設計に役に立ちます.