Click here to Skip to main content
14,272,096 members

Keep Track of Modified Values of Controls in a Web Page

Rate this:
3.88 (10 votes)
Please Sign up or sign in to vote.
3.88 (10 votes)
10 Apr 2009CPOL
An article to demonstrate which control values in a page are changed at the time of page submission


Many times we come across the situation where we want to keep track of the fact about which control values in a page are changed at the time of page submission. There can be many ways of doing it like to first create some kind of history class (just an ordinary class in .NET), expose some method of the class and then in every txtBox_Changed event or rdButton_Changed event or any other user input control event of every page, set the appropriate property on the class level domain objects based on the current value of the control being changed. The above solution may be handy in some situations. However, it was not sound enough as I was looking for a simple, generic solution that should not be heavy enough yet powerful to fit into the situation.


As it can be observed from the above described problem, the solution which can play suitably in such a situation is a client side code as opposed to server side. So I choose to play the game on the client side with the help of JavaScript. After all, the server side controls after render by the browser changes into the normal HTML controls only.

Few Key Concepts

Basically, there are a few DOM properties to be known for solving this problem and henceforth I have included this.

Property NameDescriptionSyntaxApplicable for which HTML elements
default ValueThe default value of a text field. The default value is the value specified in the HTML "value" attribute. When a page loads for the first time, the value of the text field is stored in this property.textField.defaultValue=somevalueText, Text Area, Password, File, Hidden field
ValueThe Value attribute sets the value for the input fields. The runtime change values for the input fields are stored in this attribute.inputField.value=somevalueText, Text Area, Password, File, Hidden field,Radio Button, Checkbox, Button
defaultCheckedThe default value of the Check box or Radio buttons’ checked attribute. The attribute proves to be true if the checkbox or radio button is checked at the time of page load i.e. default, otherwise it is false.checkboxField.defaultChecked<br />radiobuttonField.defaultCheckedCheck box, Radio button
CheckedThe checked value of the Check box or Radio button at runtime is stored in this attribute.checkboxField.checked<br />radiobuttonField. checkedCheck box, Radio button
defaultSelectedThe default value of the select-one or select-multiple controls. selectField.options[n]. defaultSelectedSingle select, Multi select
selectedThe selected value of the select-one or select-multiple control’s at runtime is stored in this attribute.selectField.options[n].selectedSingle select, Multi select

Walkthrough the Code

The code is self explanatory.

A small algorithm is running behind for its task.

Algo Name: MonitorChangeValues Procedure:

  • Step 1: Get all the elements of the form
  • Step 2: Loop through the form
  • Step 3: 
    1. For all Text, TextArea, Password, File and Hidden fields, check if the defaultValue field and the value fields are the same or not. If they are unequal, this indicates that something has been changed.
    2. For all Checkbox, RadioButton fields check if the defaultChecked field and the Checked fields are the same or not. If they are unequal, this indicates that something has been changed. 
    3. For all Select-single and Select-multiple fields, check if the defaultSelected and Selected fields are the same or not. If they are unequal, this indicates that something has been changed.
  • Step 4: If Step 3 is valid, then generate the report.

The above algorithm is depicted in the following code snippet:

//Function Name: CheckForModification
//Purpose: Check if anything has been changed in the form before submission
    function CheckForModification(_theForm)
        //Variables section
        var changeVal="";
        var _flag = 0;
        //Total number of elements/controls in the form
        var _totalElementsPresent = document.getElementById(_theForm).elements.length;
        //Real logic
        for( var i=0;i<_totalElementsPresent;i++)
            var _formObject = document.getElementById(_theForm).elements[i];
                    case 'text':
                    case 'textarea':
                    case 'password':
                    case 'file':
                    case 'hidden':
                                  if (_formObject.value != _formObject.defaultValue) 
                                       if(_formObject.value != "")
                                           changeVal += GenerateReport(_formObject);
                                           _flag = 1;    

                    case 'checkbox' :
                    case 'radio' :
                                   if (_formObject.checked != _formObject.defaultChecked)
                                       if(_formObject.value != "")
                                           changeVal += GenerateReport(_formObject);
                                           _flag = 1;                 

                    case 'select-one' :
                    case 'select-multiple':

                    for (var j = 0; j < _formObject.options.length; j++)
                        if (_formObject.options[j].selected != 
                            changeVal += GenerateReport(_formObject);
                            _flag = 1;

        if(changeVal.length >0) // indicates something has been changed
            document.getElementById('divDisplayStatistics').innerHTML = changeVal;

Real Time Example

Now let’s see how this can be used in a real time example:


I have created a simple form with some controls.The idea is to check at the Submit button click event whether anything in the page has been changed or not. So, the “MonitorFormChangeValues.js” file is called from the Submit button client event and if anything has been changed then it is keeping track of that by storing into the history record (a function whose signature is StoreInHistory(string strObjects)). Sometimes it is needed in projects to keep track of the changes (e.g. which control is changed, old and new values) and to store into the database.


It is just a way I felt was easy to keep track of the changes made in the form elements at runtime.


  • 10th April, 2009: Initial post


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Comments and Discussions

Questionin case of huge amount of controls Pin
Kingshuk_SP10-Mar-16 9:17
memberKingshuk_SP10-Mar-16 9:17 
QuestionNo Form tag in content page Pin
rahulshek9-Sep-15 3:50
memberrahulshek9-Sep-15 3:50 
Questiondrop a toolkitscriptmanager on the page as see what happens! Pin
Member 1030907718-Jan-14 11:30
memberMember 1030907718-Jan-14 11:30 
GeneralIngenious Pin
m_s_n20-May-09 10:42
memberm_s_n20-May-09 10:42 
GeneralRe: Ingenious Pin
Niladri_Biswas28-May-09 4:02
memberNiladri_Biswas28-May-09 4:02 
GeneralGood Pin
Manickarj14-Apr-09 20:00
memberManickarj14-Apr-09 20:00 
GeneralRe: Good Pin
Niladri_Biswas28-May-09 4:03
memberNiladri_Biswas28-May-09 4:03 
GeneralSame post Pin
Abhishek Sur13-Apr-09 22:16
professionalAbhishek Sur13-Apr-09 22:16 
GeneralVery good article Pin
Mohit Bhardwaj10-Apr-09 5:49
memberMohit Bhardwaj10-Apr-09 5:49 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Posted 10 Apr 2009


19 bookmarked