Click here to Skip to main content
11,712,802 members (84,815 online)
Click here to Skip to main content

Keep Track of Modified Values of Controls in a Web Page

, 10 Apr 2009 CPOL 21.2K 690 19
Rate this:
Please Sign up or sign in to vote.
An article to demonstrate which control values in a page are changed at the time of page submission

Introduction

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.

Background

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 Name Description Syntax Applicable for which HTML elements
default Value The 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=somevalue Text, Text Area, Password, File, Hidden field
Value The Value attribute sets the value for the input fields. The runtime change values for the input fields are stored in this attribute. inputField.value=somevalue Text, Text Area, Password, File, Hidden field,Radio Button, Checkbox, Button
defaultChecked The 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
radiobuttonField.defaultChecked
Check box, Radio button
Checked The checked value of the Check box or Radio button at runtime is stored in this attribute.
checkboxField.checked
radiobuttonField. checked
Check box, Radio button
defaultSelected The default value of the select-one or select-multiple controls. selectField.options[n]. defaultSelected Single select, Multi select
selected The selected value of the select-one or select-multiple control’s at runtime is stored in this attribute. selectField.options[n].selected Single 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];
            switch(_formObject.type)
            {                                    
                    case 'text':
                    case 'textarea':
                    case 'password':
                    case 'file':
                    case 'hidden':
                                  if (_formObject.value != _formObject.defaultValue) 
                                  {
                                       if(_formObject.value != "")
                                       {
                                           changeVal += GenerateReport(_formObject);
                                           _flag = 1;    
                                       }
                                  }
                                  break;

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

                                   break;
                    
                    case 'select-one' :
                    case 'select-multiple':

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

                    break;                   
            }
        }
        
        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:

MonitorFormChangeValues_small.JPG

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.

Conclusion

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

History

  • 10th April, 2009: Initial post

License

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

Share

About the Author


You may also be interested in...

Comments and Discussions

 
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
memberAbhishek 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    Rant Rant    Admin Admin   

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

| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.150819.1 | Last Updated 10 Apr 2009
Article Copyright 2009 by Niladri_Biswas
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid