在网页上验证不同的控件

Question

我有一个网页有40个奇怪的控件，如文本框，单选按钮，复选框，下拉列表。我必须实现一种场景，如果用户更改了任何控件的状态并希望从页面导航而不保存它，则应用程序必须弹出一个窗口。

我明白，这需要在客户端完成，但这里的问题是如何检查哪40个奇怪的控制已被更改。所有这些字段不一定是强制性的。

Answer 1

您可以在页面加载时保存其值，然后在发送表单时将这些值与当前值进行比较。

此示例警报改变控件的ID：

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('.inputToCheck').each(function() { 
      $(this).data("oldValue", $(this).val()) 
     }); 

     $('#btn').click(function() { 
      $('.inputToCheck').each(function() { 
       if ($(this).data("oldValue") != $(this).val()) 
        alert($(this).attr('id')); 
      }); 
     }); 
    }); 
</script> 

<input type="text" id="txt1" class="inputToCheck" value="10" /> 
<input type="text" id="txt2" class="inputToCheck" value="20" /> 
<input type="text" id="txt3" class="inputToCheck" value="30" /> 
<input type="button" id="btn" value="send" />