javascript - 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 -

may did not ask question right way, have following scenario.

i have table generated gridview. table has number of rows 1 editable field: email address.

what want when, example, user changed email field did not submit yet database, forgets , clicks on text box edit it, remind user he/she left field changed did not update yet?

this html generated 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 handle such scenario?

thank's

something work.

first, walk on email fields store loaded value place 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! changed e-mail!');              }         }     ); }); 

note: need bind "save" event to:

1. prevent notice being thrown, since clicking "save" legitimate , shouldn't cause warning.
2. to update data-old-email value newly saved value prevent warnings if came field.

depending on application, bind checking function focus of other fields, rather blur of specified e-mail field.

but approach 1 (of several) use.