Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 246
  • Last Modified:

To check if a field has been changed on the page

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
mrigank
Asked:
mrigank
  • 9
  • 6
  • 5
  • +1
1 Solution
 
alexprestonCommented:
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
 
alexprestonCommented:
for event field?? I'm talking rubbish!! :)
I meant to say "Or have a change event for each field..."
0
 
ZvonkoSystems architectCommented:
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
alexprestonCommented:
Yes, it's defaultChecked.

(http://lib.ru/JAVA/javascr/ref_d-e.html)
0
 
ZvonkoSystems architectCommented:
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
 
justinbilligCommented:
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
 
justinbilligCommented:
<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
 
ZvonkoSystems architectCommented:
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
 
alexprestonCommented:
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
 
justinbilligCommented:
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
 
ZvonkoSystems architectCommented:
80% will warn you in any case and expect from you that you know what you do.
0
 
justinbilligCommented:
what?
0
 
ZvonkoSystems architectCommented:
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
 
justinbilligCommented:
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
 
ZvonkoSystems architectCommented:
:-)
The whole life is an accident (but I suppose that is a topic for Lounge or Religion&Philosophy TA :)
0
 
ZvonkoSystems architectCommented:
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
 
mrigankAuthor Commented:
Thanks to all of you... :) :)
0
 
ZvonkoSystems architectCommented:
You are welcome :-)
0
 
alexprestonCommented:
My life is certainly an accident :-$
0
 
ZvonkoSystems architectCommented:
I hope a good one ;-)
0
 
alexprestonCommented:
It has it's moments :-D
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 9
  • 6
  • 5
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now