Identifying value changed controls while submitting

Most of the application developers face the common requirement of giving alert message or showing a popup when particular set of controls are

changed. Consider the following example.

 

Requirement: The alert message or a popup should be shown only when the Language, Timezone and Country controls are changed. If those controls are not

changed, just save the imformation submitted.

 

 

<table cellspacing="0" cellpadding="0" border="0">

        <tr>

            <td>

                <asp:Label ID="Label1" runat="server" Text="Language:" AssociatedControlID="LanguageDropDownList"

                    EnableViewState="False" />

            </td>

            <td>

                <asp:DropDownList ID="DropDownList1" runat="server" EnableViewState="False">

                </asp:DropDownList>

            </td>

        </tr>

        <tr>

            <td>

                <asp:Label ID="Label2" runat="server" Text="Timezone:" AssociatedControllID="TimeZonesDropDownList"

                    EnableViewState="False" />

            </td>

            <td>

                <asp:DropDownList ID="DropDownList2" runat="server" EnableViewState="False">

                </asp:DropDownList>

            </td>

        </tr>

        <tr>

            <td>

                <asp:Label ID="CountryLabel" runat="server" Text="Country:" EnableViewState="False" />

            </td>

            <td>

                <asp:TextBox ID="CountryTextBox" runat="server" Text="">

                </asp:TextBox>

            </td>

        </tr>

    </table>

    <table cellspacing="0" cellpadding="0" border="0">

        <tr>

            <td>

                <asp:Label ID="NameLabel" runat="server" Text="Name:" EnableViewState="False" />

            </td>

            <td>

                <asp:TextBox ID="NameTextBox" runat="server" Text="">

                </asp:TextBox>

            </td>

        </tr>

        <tr>

            <td>

                <asp:Label ID="RoleLabel" runat="server" Text="Role:" AssociatedControlID="RoleDropDownList"

                    EnableViewState="False" />

            </td>

            <td>

                <asp:DropDownList ID="RoleDropDownList" runat="server" EnableViewState="False">

                </asp:DropDownList>

            </td>

            <tr>

    </table>

 

 

Logic 1: Setting a flag when control value changed

 

1. To address this requirement, developers used the logic of setting a flag to true whenever any of the required controls is changed.

 

var isChanged = false;

 

function changeStatus()

{

      if(!isChanged) isChanged=true;

}

 

The javascript method changeStatus() will be called for Language, Timezone and Country controls. Based on the flag value, the decision of

showing the alert/popup or not is taken. This logic has some flaws. When the user changes the control value and immediately set back to the old

value, the flag is still set to true. The logic fails. Then we need to find out the solution for not setting true while the value is set back to old.

 

Logic 2: Compare the populated value and current value

 

There is another different  logic for the given requirement. On server side page_load (..) method, while populating the controls get the values of

required controls and store it in a hidden field.

 

if(!IsPostback)

{

      PopulateControls();

}

 

private populateControls()

{

..

..

 

    initialValueHiddenField.Value = LanguageDropDownList.SelectedValue + TimeZonesDropDownList.SelectedValue + CountryTextBox.Text;

}

 

 

At the time of submitting, on client side get the concatenated values and compare with the populated values to decide showing the popup.

 

function SubmitButtonClientClick()

{

      var actualValue = document.getElementById('LanguageDropDownList').options ......

                  + document.getElementById('TimezonDropDownList').options ......;

                  + document.getElementById('CountryTextBox').value;

 

      if(document.getElementById('initialValueHiddenField').value == actualValue)

      {

            return ShowPopup();

      }

}

 

Logic 3: Check the initial value and current value using JQuery

 

Set an Id attribute to the table where the required controls are there.

 

<table cellspacing="0" cellpadding="0" border="0" id="settingsTable">

 

Now the following client side methods should be written.

 

$(document).ready(function() {

      initialState = getState();

}

function getState()

        {

              var state = "";

              $('#settingstable input, #settingstable select).each( function() {

                      //for checkbox controls val() method always returns "on" irrespective of the checked/unchecked state.

                      //so get the checked/unchecked value only for checkboxes. For other controls, get the val()

                      if($(this).val()=="on"){

                          state += $(this).is(':checked');

                      }

                      else{

                          state += $(this).val();

                      }

              });

              return state;

        }

function SubmitButtonClientClick()

{

      if(initialState  == getState())

      {

            return ShowPopup();

      }

}

 

Since we did not use the ID property of the controls, when new controls are introduced, we should just add to the settingstable.

So this logic will be more effective. As we are using JQuery no need to worry about the browser compatibility.