How to compare old value of one text field when it is clicked, with the value of the same text field when it loses a focus

Question

May be I did not ask the question the right way, but I have the following scenario.

I have a table generated from GridView . This table has number of rows with one editable field: email address.

What I want to do is when, for example, a user changed email field but did not submit it yet to the database, forgets about it and clicks on another text box to edit it, I remind the user that he/she left the field changed but did not update it yet?

This is my html generated from GridView :

<div>
<table cellspacing="0" id="MainContent_GridView1" style="border-collapse:collapse;">
    <tr>
        <th scope="col"><a href="javascript:__doPostBack(&#39;ctl00$MainContent$GridView1&#39;,&#39;Sort$CustID&#39;)">Customer ID</a></th><th scope="col"><a href="javascript:__doPostBack(&#39;ctl00$MainContent$GridView1&#39;,&#39;Sort$CustFirstName&#39;)">First Name</a></th><th scope="col"><a href="javascript:__doPostBack(&#39;ctl00$MainContent$GridView1&#39;,&#39;Sort$CustLastName&#39;)">Last Name</a></th><th scope="col"><a href="javascript:__doPostBack(&#39;ctl00$MainContent$GridView1&#39;,&#39;Sort$CustCity&#39;)">City</a></th><th scope="col">Email</th>
    </tr><tr>
        <td>
          <span id="MainContent_GridView1_lblCustID_0">12</span>
        </td><td>
          <span id="MainContent_GridView1_lblFirstName_0">Anders</span>
        </td><td>
          <span id="MainContent_GridView1_lblLastName_0">Rohansen</span>
        </td><td>
         <span id="MainContent_GridView1_lblCity_0">Takoma Park</span>
       </td><td>
         <input name="ctl00$MainContent$GridView1$ctl02$txtEmail" type="text" value="a.rohansen@testemail.com" id="MainContent_GridView1_txtEmail_0" />
          <span data-val-controltovalidate="MainContent_GridView1_txtEmail_0" data-val-errormessage="Must enter Email Address" data-val-validationGroup="grpEmail" id="MainContent_GridView1_ctl00_0" data-val="true" data-val-evaluationfunction="RequiredFieldValidatorEvaluateIsValid" data-val-initialvalue="" style="visibility:hidden;">Must enter Email Address</span>
           <input type="submit" name="ctl00$MainContent$GridView1$ctl02$btnUpdate" value="Update Email" onclick="return ValidateEmail(this);WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$MainContent$GridView1$ctl02$btnUpdate&quot;, &quot;&quot;, true, &quot;grpEmail&quot;, &quot;&quot;, false, false))" id="MainContent_GridView1_btnUpdate_0" ButtonType="Button" />

         </td>
    </tr><tr style="background-color:#EEEEEE;">
        <td>
          <span id="MainContent_GridView1_lblCustID_1">8</span>
        </td><td>
          <span id="MainContent_GridView1_lblFirstName_1">Deborah</span>
        </td><td>
          <span id="MainContent_GridView1_lblLastName_1">Damien</span>
        </td><td>
         <span id="MainContent_GridView1_lblCity_1">Fresno</span>
       </td><td>
         <input name="ctl00$MainContent$GridView1$ctl03$txtEmail" type="text" value="d.damien@testemail.com" id="MainContent_GridView1_txtEmail_1" />
          <span data-val-controltovalidate="MainContent_GridView1_txtEmail_1" data-val-errormessage="Must enter Email Address" data-val-validationGroup="grpEmail" id="MainContent_GridView1_ctl00_1" data-val="true" data-val-evaluationfunction="RequiredFieldValidatorEvaluateIsValid" data-val-initialvalue="" style="visibility:hidden;">Must enter Email Address</span>
           <input type="submit" name="ctl00$MainContent$GridView1$ctl03$btnUpdate" value="Update Email" onclick="return ValidateEmail(this);WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$MainContent$GridView1$ctl03$btnUpdate&quot;, &quot;&quot;, true, &quot;grpEmail&quot;, &quot;&quot;, false, false))" id="MainContent_GridView1_btnUpdate_1" ButtonType="Button" />

         </td>
    </tr><tr>
        <td>
          <span id="MainContent_GridView1_lblCustID_2">7</span>
        </td><td>
          <span id="MainContent_GridView1_lblFirstName_2">Derek</span>
        </td><td>
          <span id="MainContent_GridView1_lblLastName_2">Chaddick</span>
        </td><td>
         <span id="MainContent_GridView1_lblCity_2">Fairfield</span>
       </td><td>
         <input name="ctl00$MainContent$GridView1$ctl04$txtEmail" type="text" value="d.chaddick@testemail.com" id="MainContent_GridView1_txtEmail_2" />
          <span data-val-controltovalidate="MainContent_GridView1_txtEmail_2" data-val-errormessage="Must enter Email Address" data-val-validationGroup="grpEmail" id="MainContent_GridView1_ctl00_2" data-val="true" data-val-evaluationfunction="RequiredFieldValidatorEvaluateIsValid" data-val-initialvalue="" style="visibility:hidden;">Must enter Email Address</span>
           <input type="submit" name="ctl00$MainContent$GridView1$ctl04$btnUpdate" value="Update Email" onclick="return ValidateEmail(this);WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$MainContent$GridView1$ctl04$btnUpdate&quot;, &quot;&quot;, true, &quot;grpEmail&quot;, &quot;&quot;, false, false))" id="MainContent_GridView1_btnUpdate_2" ButtonType="Button" />

         </td>
    </tr>
</table>

How can I handle such a scenario?

Thank's

Answer 1

Something like this would work.

First, walk over all the email fields to store the loaded value into a place you can reference. Then, on blur check if it's been changed.

jQuery(function($) {
    $('input.email').each(
        function() {
             $(this).attr('data-old-email', $(this).val());
        }
    );

    $('input.email').blur(
        function() {
             if ($(this).attr('data-old-email') != $(this).val()) {
                 alert('Wait! You changed your e-mail!');
             }
        }
    );
});

Note: You will need to bind to the "Save" event to:

1. Prevent the notice from being thrown, since clicking "Save" is legitimate and shouldn't cause a warning.
2. To update the data-old-email value to the newly saved value to prevent warnings if they came back to that field.

Depending on your application, you could bind the checking function to the focus of other fields, rather than the blur of the specified e-mail field.

But this approach is one (of several) that you could use.

Answer 2

If you can use JQuery then I'd go with something like this,

var lastTextVal ='';
$('.ClickableField').focus(function(){lastTextVal = $(this).val();});
$('.ClickableField').blur(function(){alert($(this).val()==lastTextVal);});

Edit:

This scenario is ok as long as they submit changes before leaving the page. So why not disable the submit button until something has changed and then enable it to remind them to submit changes.

$(document).ready(function() {
     $(':submit').attr('disabled','disabled');

    var lastTextVal ='';
    $('.ClickableField').focus(function(){lastTextVal = $(this).val();});
    $('.ClickableField').blur(function(){
                              if($(this).val()!=lastTextVal) {
                                    $(':submit').removeAttr('disabled');
                                 }
                               });        
 });

Edit 2: In this example you could also check if the submit button is enabled when they click on something that would navigate them away and prompt them then to submit like this.

$('a, button').click(function(){

        if($(':submit').attr('disabled') != 'disabled')
        {
           return confirm("You haven't saved!\n Do you want to navigate away anyway?\n OK to continue or Cancel to stay here.");
        }
  });

Edit:3

Hm. I see why you were having problems.

I'd do 1 of 2 things when the users leaving the field.

Alert them.

$(document).ready(function() {
    var lastTextVal ='';
    $('input:text').focus(function(){lastTextVal = $(this).val();});
    $('input:text').blur(function(){
                              if($(this).val()!=lastTextVal) {
                                    alert('Please submit Changes!');

                                 }
                               });        
 });

This is annoy and will occur even if the reason they left the textbox was a click on the submit button for the row.

The other. Add a border to the fields that have been changed to show them action is needed.

 $(document).ready(function() {
    var lastTextVal ='';
    $('input:text').focus(function(){lastTextVal = $(this).val();});
    $('input:text').blur(function(){
                              if($(this).val()!=lastTextVal) {
                                    $(this).css('border','5px solid red;');
                                 }
                               });        
 });

This puts a red outline on the fields that have been changed. This is pretty good but if the submit doesn't cause a page refresh you'll need something to drop the border when they hit submit like this.

$(':submit').click(function(){ $(this).parent( ).children(":text" ).css( "border", "" );});

Which will remove the border. :)

HERE's a jsfiddle with the code running with your example code.