驗證網頁上的不同控件

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" />