Solved

To check if a field has been changed on the page

Posted on 2004-08-18
21
237 Views
Last Modified: 2008-02-01
Hi,
On my page i have a button 'Cancel'. On clicking it the user is returned to the previous page without performing any action. On clicking the button, i give a popu saying that unsaved data will be lost. But irrespective of the user changing any data, this pop up comes. I want a way to determine if the contents of the page have been changed. Something like comparing the state of the page on the click and on load. Can it be done. Is there some functionality in javascript that can help ?? I would like to show the popup only if the data on the page has been modified.

Thanks,
Mrigank.
0
Comment
Question by:mrigank
  • 9
  • 6
  • 5
  • +1
21 Comments
 
LVL 3

Expert Comment

by:alexpreston
ID: 11828585
Two possible methods, either store all the initial values in hidden text fields, then compare everything against these values when the cancel button is clicked. Or have a change event for event field, that sets a boolean flag to indicate that data has changed. Then when the cancel button is clicked all that remains is to check this one boolean variable.
0
 
LVL 3

Expert Comment

by:alexpreston
ID: 11828594
for event field?? I'm talking rubbish!! :)
I meant to say "Or have a change event for each field..."
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 11831416
For every form input field there is already a property named: defaultValue
For select options there is for every option an attribute: defaultSelected
I do not know what the default attributes are for radios and checkboxes. (perhaps defualtChecked, I don't know)




0
 
LVL 3

Expert Comment

by:alexpreston
ID: 11831494
Yes, it's defaultChecked.

(http://lib.ru/JAVA/javascr/ref_d-e.html)
0
 
LVL 63

Accepted Solution

by:
Zvonko earned 50 total points
ID: 11831659
Thanks ;-)

Here the complette script:

<html>
<head>
<script>
function goBack(theBtn){
  changed = false;
  elem = theBtn.form.elements;
  for(i=0;i<elem.length;i++){
    if(elem[i].type.substr(0,4)=="text"){
      if(elem[i].defaultValue!=elem[i].value){
        changed = true;
        break;
      }
    }
    if(elem[i].type.substr(0,6)=="select"){
      opt = elem[i].options;
      for(j=0;j<opt.length;j++){
        if(opt[j].defaultSelected!=opt[j].selected){
          changed = true;
          break;
        }
      }
    }
    if(elem[i].defaultChecked!=elem[i].checked){
       changed = true;
       break;
    }
  }
  if(changed==true){
    alert("Changed!")
  }
}
</script>
</head>
<body>
<form>
<input type=text name="someName" value="enter Name">
<textarea name="Comment">
Enter Comments
</textarea>
<select name="Choose" MULTIPLE>
<option value="one" SELECTED>One
<option value="two" SELECTED>Two
<option value="three" SELECTED>Three
</select>
<input type=radio name="Accept" value="Yes" checked> Yes
<input type=radio name="Accept" value="No"> No
<input type=checkbox name="AGB" value="Checked"> AGB
<input type=submit name="Submit" value="Post">
<input type=button value="Cancel" onClick="goBack(this)">
</form>
</body>
</html>


0
 
LVL 15

Expert Comment

by:justinbillig
ID: 11831853
i like this method i use it all the time

i make a global variable called g_blnDirty

then in the onchange event for every control i make a function called on change that will set the dirty flag

like so


<script language="javascript">
      var g_blnDirty = false; // Assume clean form

      function OnChange( )
      {
            // Set the dirty flag
            g_blnDirty = true;
      }

      function GoBack( )
      {
            var blnGoBack = true; // Assume yes

            // Are we dirty
            if( g_blnDirty == true )
            {
                  // Yes, do they want to lose the changes
                  blnGoBack = confirm( "Do you wish to cancel your changes?" );
            }

            if( blnGoBack == true )
            {
                  alert( "Leaving This Page." );
            }
            else
            {
                  alert( "Stay here." );
            }
      }

</script>
<html>


      <body>


            <input type="text" value="" name="strTest" onchange="OnChange( );">
            <input type="button" name="btnGoBack" value="Go Back" onclick="GoBack( );">
      </body>
</html>
0
 
LVL 15

Expert Comment

by:justinbillig
ID: 11831911
<script language="javascript">
      var g_blnDirty = false; // Assume clean form

      function OnChange( )
      {
            // Set the dirty flag
            g_blnDirty = true;
      }

      function GoBack( )
      {
            var blnGoBack = true; // Assume yes

            // Are we dirty
            if( g_blnDirty == true )
            {
                  // Yes, do they want to lose the changes
                  blnGoBack = confirm( "Do you wish to cancel your changes?" );
            }

            if( blnGoBack == true )
            {
                  alert( "Leaving This Page." );
            }
            else
            {
                  alert( "Stay here." );
            }
      }

</script>
<html>


      <body>


            <input type="text" value="" name="strTest" onchange="OnChange( );"><br>
            <select name="cmbSelect" onchange="OnChange( );"><br>
                  <option> Option 1
                  <option> Option 2
            </select>
            <input type="radio" name="radValues" onchange="OnChange( );"> Value 1
            <input type="radio" name="radValues" onchange="OnChange( );"> Value 2<br>
            <input type="checkbox" name="chkValues" onchange="OnChange( );"> Value 1<br>
            <input type="button" name="btnGoBack" value="Go Back" onclick="GoBack( );">
      </body>
</html>


here it is with all differnt kinds of contorls
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 11832015
The big difference betwaen your and mine approach is that you need on every control the event handler.
And your dirty flag cannot be reset.
My approach ignores changes which are changed back to the default settings.
0
 
LVL 3

Expert Comment

by:alexpreston
ID: 11832099
As I said at the start, 2 possible methods ;-)
But you are right, this 2nd method does not reset the dirty flag if the user undoes their changes.
0
 
LVL 15

Expert Comment

by:justinbillig
ID: 11833252
err well adding an event handler isnt hard if that is really that big of a problem, and my code is simple as far as changing it back ... who cares .. 90% of apps out there will still prompt you to cancel your changes even if you reset it back to normal
0
Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

 
LVL 63

Expert Comment

by:Zvonko
ID: 11833347
80% will warn you in any case and expect from you that you know what you do.
0
 
LVL 15

Expert Comment

by:justinbillig
ID: 11833566
what?
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 11834103
I mean the effort we invest here is not worth. The standard alert in any case is better then any buggy analysis which release you from thinking.
Anyway, I hate the questions like "Are you sure you want to do what you are gona to do???"
Loosing two times the entered data will you make thinking the third time before canceling that action.

0
 
LVL 15

Expert Comment

by:justinbillig
ID: 11834228
i do believe that we program this way in cases of accidents ... i've accidentally hit close buttons before, and probably would have been pissed if it didnt ask me to cancel my changes
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 11834369
:-)
The whole life is an accident (but I suppose that is a topic for Lounge or Religion&Philosophy TA :)
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 11868409
Oh, an old one. And a typical one. The asker expects all support of the world and did not post a comment in our chat about the world or even a ThankYou after his "payment" :(
0
 
LVL 5

Author Comment

by:mrigank
ID: 11868637
Thanks to all of you... :) :)
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 11868742
You are welcome :-)
0
 
LVL 3

Expert Comment

by:alexpreston
ID: 11868755
My life is certainly an accident :-$
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 11868964
I hope a good one ;-)
0
 
LVL 3

Expert Comment

by:alexpreston
ID: 11868983
It has it's moments :-D
0

Featured Post

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

707 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now