Form Is Dirty - Confirm To Save Or Cancel

Last post 02-28-2007 4:05 PM by JoshStodola. 5 replies.

Sort Posts:

  • Form Is Dirty - Confirm To Save Or Cancel

    02-27-2007, 7:47 PM
    • Loading...
    • rrobbins
    • Joined on 06-19-2002, 10:35 AM
    • Williamsport, PA 17701
    • Posts 65

    Hello Programmers,

    I'm trying to implement a client side test for a dirty form (i.e form data has changed) . If the data entry person attempts to navigate away from the form without committing the changes, a confirm alert box will pop up to remind the user to save the changes or cancel.

    Here is the example client side code without using ASP.NET:

    1    <script language="javascript">
    2    var isDirty;
    3    isDirty = 0;
    4    function setDirty() {
    5    	isDirty = 1;
    6    }
    7    function checkSave() {
    8    	var sSave;
    9    	if (isDirty == 1) {
    10   		sSave = window.confirm("You have some changes that have not been saved. Click OK to save now or CANCEL to continue without saving.");
    11   		if (sSave == true) {
    12   			window.document.frmTest.submit();
    13   		} else {
    14   			return true;
    15   		}
    16   	}
    17   }
    18   </script>
    19   <body onunload="checkSave()">
    20   <h1>Submit Changes Test</h1>
    21   <hr noshade size="1">
    22   <form name="frmTest" action="" method="post">
    23   <font face="Arial">First Name: <input type="text" name="FirstName" value="Robert" size="40" onchange="setDirty()"><br>
    24   Second Name: </font> <input type="text" name="SecondName" value="Robbins" size="40" onchange="setDirty()"><br>
    25   <input type="submit" name="btnSubmit" value="Submit Form" onclick="isDirty = 0;">
    26   </form>
    27   <p><font face="Arial"><a href="http://www.yahoo.com">Yahoo</a></font></p>
    28   
    

    In my attempt to implement this for an ASP.NET page I use this code in the ASPX file: 

    1    <script language="javascript">
    2    var isDirty;
    3    isDirty = 0;
    4    function setDirty() {
    5    	isDirty = 1;
    6    }
    7    function checkSave() {
    8    	var sSave;
    9    	if (isDirty == 1) {
    10   		sSave = window.confirm("You have some changes that have not been saved. Click OK to save now or CANCEL to continue without saving.");
    11   		if (sSave == true) {
    12   			window.document.frmEditApp.submit();
    13   		} else {
    14   			return true;
    15   		}
    16   	}
    17   }	
    18   </script>
    19   <body class="StandardBody" onunload="checkSave()">
    
     

    And this code in the VB code behind file:

    1    ' add JavaScript events to web controls
    2    btnSubmit.Attributes.Add("onclick", "isDirty = 0;")
    3    btnCancel.Attributes.Add("onclick", "isDirty = 0;")
    4    ' plaintiff information
    5    txtName.Attributes.Add("onchange", "setDirty();")
    6    txtAddress.Attributes.Add("onchange", "setDirty();")
    

     It works except the JavaScript to submit the form does not appear to trigger the server side button's click event so the data does not get saved. I cannot figure out how to get the client-side JavaScript to fire the server side event btnSubmit_Click. Do I need to use a client callback? I have been unable to find any sample code to accomplish this requirement.

     

    Robert S. Robbins
    Web Developer
    http://www.williamsportwebdeveloper.com/
    Filed under: , ,
  • Re: Form Is Dirty - Confirm To Save Or Cancel

    02-27-2007, 10:40 PM
    • Loading...
    • A1ien51
    • Joined on 05-06-2005, 2:46 PM
    • MD USA
    • Posts 2,852

    you will probably want to use onbeforeunload

    Eric

    Coauthor of Ajax In Action [#1 Computer and Internet book on Amazon for 2006]

    If you get an answer to your question, please mark it solved so people don't waste time reading already answered questions!
  • Re: Form Is Dirty - Confirm To Save Or Cancel

    02-28-2007, 1:03 PM
    • Loading...
    • rrobbins
    • Joined on 06-19-2002, 10:35 AM
    • Williamsport, PA 17701
    • Posts 65
    A1ien51:

    you will probably want to use onbeforeunload

    I have tried this and it makes it necessary to click the confirmation alert's OK button twice. Also the data is still not being updated because the server side button's click event is not being triggered by the JavaScript form submit.

    Robert S. Robbins
    Web Developer
    http://www.williamsportwebdeveloper.com/
  • Re: Form Is Dirty - Confirm To Save Or Cancel

    02-28-2007, 3:05 PM
    Answer
    • Loading...
    • JoshStodola
    • Joined on 01-16-2007, 9:17 AM
    • Heartland of America
    • Posts 3,025

    Instead of submitting the form, you need to issue a postback to get the server side btnSubmit_Click method to fire.  Submitting the form, in theory, should work becuase this is what a postback does.  However, there are two hidden fields that are used to tell the server what to do on the postback.  Try this:

       function checkSave() {
       	var sSave;
       	if (isDirty == 1) {
       		sSave = window.confirm("You have some changes that have not been saved. Click OK to save now or CANCEL to continue without saving.");
       		if (sSave == true) {
                               document.getElementById('__EVENTTARGET').value = 'btnSubmit';
                               document.getElementById('__EVENTARGUMENT').value = 'Click';
       			window.document.frmTest.submit();
       		} else {
       			return true;
       		}
       	}
       }
    
      

    Hope this helps!  Don't forget to mark the most helpful post(s) as Answer for the sake of future readers.  Thanks

    Josh Stodola ← Come check out my blog!
  • Re: Form Is Dirty - Confirm To Save Or Cancel

    02-28-2007, 4:02 PM
    • Loading...
    • rrobbins
    • Joined on 06-19-2002, 10:35 AM
    • Williamsport, PA 17701
    • Posts 65

    Thanks Josh,

    Your answer is the solution. Thanks! I'll add this to my notes.

     

    Robert S. Robbins
    Web Developer
    http://www.williamsportwebdeveloper.com/
  • Re: Form Is Dirty - Confirm To Save Or Cancel

    02-28-2007, 4:05 PM
    • Loading...
    • JoshStodola
    • Joined on 01-16-2007, 9:17 AM
    • Heartland of America
    • Posts 3,025
    You're welcome.  I actually ran into an identical issue on Monday with one of my web apps, and this fixed it for me also.  Glad I could help!
    Josh Stodola ← Come check out my blog!
Page 1 of 1 (6 items)
Microsoft Communities
Page view counter