Changed form fields

This page demonstrates how a visual clue can be given that a form field has changed value. The inputs below get their default value from the server ("field x content"). In the onload event of the page, onblur event handlers are registered for the controls, and in these events, the value of the controls is compared to the value in the defaultValue property. The className property of the control is set accordingly.

If another page is loaded from this test page (say, the validation pages), and the back button is pressed, the form controls' className property revert back to their original value. Therefore, the page's onload event is also used to immediately compare the control's content with the defaultValue property.

There are many different ways to achieve the desired goal. In this case, an approach was chosen that can easily be dropped-in into existing forms. An alternative would be to set explicit event handlers in HTML. Note that the code assumes inputs of type text; real-world code would probably need to check for other controls, and for the presence of onblur event handlers.

Note that this is work in progress, it's unfinished for anything but the text input fields!

Field 1
Field 2
Field 3

Check HTML - Check CSS - Index