Form Is Dirty - Confirm To Save Or Cancel

Last post 08-20-2009 7:53 AM by NC01. 9 replies.

Sort Posts:

  • Form Is Dirty - Confirm To Save Or Cancel

    02-27-2007, 7:47 PM
    • Member
      307 point Member
    • rrobbins
    • Member since 06-19-2002, 10:35 AM
    • Williamsport, PA 17701
    • Posts 69

    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
    • All-Star
      20,626 point All-Star
    • A1ien51
    • Member since 05-06-2005, 6:46 PM
    • MD USA
    • Posts 3,789

    you will probably want to use onbeforeunload

    Eric

  • Re: Form Is Dirty - Confirm To Save Or Cancel

    02-28-2007, 1:03 PM
    • Member
      307 point Member
    • rrobbins
    • Member since 06-19-2002, 10:35 AM
    • Williamsport, PA 17701
    • Posts 69
    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
    • Star
      13,726 point Star
    • JoshStodola
    • Member since 01-16-2007, 9:17 AM
    • Heartland of America
    • Posts 3,177

    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
    • Member
      307 point Member
    • rrobbins
    • Member since 06-19-2002, 10:35 AM
    • Williamsport, PA 17701
    • Posts 69

    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
    • Star
      13,726 point Star
    • JoshStodola
    • Member since 01-16-2007, 9:17 AM
    • Heartland of America
    • Posts 3,177
    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!
  • Re: Form Is Dirty - Confirm To Save Or Cancel

    04-08-2009, 2:08 PM
    • Contributor
      4,912 point Contributor
    • mkamoski
    • Member since 07-04-2002, 8:05 PM
    • ZULU-0500
    • Posts 1,342

    How can this be done if one is using a MasterPage?

    That is, in page-x that uses the MasterPage, I want to have that JavaScript/etc solution that is noted above.

    Unfortunately, I cannot seem to wire this...

     <body class="StandardBody" onunload="checkSave()">

    ...so I am a little stuck.

    Can you help?

    Please advise.

    Thank you.

    -- Mark Kamoski

    Filed under:
  • Re: Form Is Dirty - Confirm To Save Or Cancel

    04-08-2009, 2:21 PM
    • All-Star
      74,705 point All-Star
    • NC01
    • Member since 08-26-2005, 3:33 PM
    • Posts 13,868
    • TrustedFriends-MVPs

    Give your body tag the runat="server" property and an ID property <body id="myBody" runat="server"> then attach the handler in the CodeBehind myBody.Attributes.Add("onunload", "yourFunction();")

    NC...

  • Re: Form Is Dirty - Confirm To Save Or Cancel

    08-20-2009, 7:46 AM
    • Member
      20 point Member
    • dharam_hbtik
    • Member since 02-25-2008, 11:55 AM
    • Noida
    • Posts 23

     I want to do it in server side means i dont want to  do it in javascript.

    please help me doing this in server side

    dharam
  • Re: Form Is Dirty - Confirm To Save Or Cancel

    08-20-2009, 7:53 AM
    • All-Star
      74,705 point All-Star
    • NC01
    • Member since 08-26-2005, 3:33 PM
    • Posts 13,868
    • TrustedFriends-MVPs

    dharam_hbtik:

     I want to do it in server side means i dont want to  do it in javascript.

    please help me doing this in server side

     

    Help you do what? Start your own post, detailing out what you want and need, and you will probably get help.

    NC...

     

Page 1 of 1 (10 items)