Validate distinct controls on a web page

Question

I have a web page that has 40 odd controls like text boxes, radio buttons, check boxes, drop downs. I have to implement a scenario where if a user changes the state of any of the controls and wishes to navigate away from the page without saving it, the application must throw a pop up.

I understand that this needs to be done on client side but the issue here is how to check which one of the 40 odd control has been changed. All of these fields need not be mandatory.

Answer 1

You can save their value on page load and then compare those values with current ones when the form is sent.

This sample alerts the ids of changed controls:

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