Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Need evaluation of "dirty flag" methods 2

Status
Not open for further replies.
ESHbyESH

ESHbyESH

Programmer
Aug 4, 2006
5
US
Hi everyone, I'm new here.
I have intermediate skills in JavaScript and I was looking for a VERY simple way to set a dirty flag on a page - completely client-side.
So I came up with the following script and would like to get some feedback on it. The form I would be using this for has textboxes, selects and checkboxes.
Known bugs:
initial version is IE only, have not tested it on FF.

Code: 
// functions to handle "dirty flag"
    var dirtyString;
function initDirtyFlag()
{
	dirtyString = compileString();
}
function compileString()
{
	var localString='';
	var theForm = document.getElementById("linenCustomization");

    for (i=0; i<theForm.elements.length;i++)
    {
		control = theForm.elements[i];
		if(control.type == 'checkbox')
			localString = localString + control.checked + '/';
		else
            localString = localString + control.value + '/';
        }
   // alert(localString);
    return localString;
}
//set a hidden field in the form
function checkDirtyFlag()
{
	var localString = compileString();
	var isDirty = (localString != dirtyString);
	var theForm = document.getElementById("linenCustomization");
	theForm.isDirty.value = isDirty;
	setTimeout('checkDirtyFlag()', 1000);
}
</script>
....
...
<body onload="initDirtyFlag();setTimeout('checkDirtyFlag()', 2000);">
<form name="linenCustomization" style="width: 750px;" action="/loms/addCustomLinen.spring" method="post">
<input type="hidden" name="isDirty" id="isDirty" value="false" />
...I would then check the hidden form field on page unLoad (there is a normal save button as well), and if the user is leaving the page with unsaved changes, prompt him/her to save. I am just curious what folks here think of the methodology.
Thanks!
 
Sort by date Sort by votes
I think you should check the "defaultValue" property (which every form element has) against the value property.

Simple, clean, and uses the properties which were designed for this.

Hope this helps,
Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
That could work, if I set the defaultValue property on every element when it's loaded. See, this form could be loaded with pre-saved values, or it might be blank, based on the situation. Either way, if someone then enters a new value, I want to set the dirty flag.
But I guess if I build that into the page I could use that method, comparing the defaultVal to the currentValue on submit.
 
Upvote 0 Downvote
AFAIK, you do not need to set the "defaultValue" property - it is set automatically by the browser when the element is delivered to the page.

Test it out and see.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
No, the defaultVal property did not help. I ended up changing the script to loop through all elements, and place an onchange handler on them, which would set the hidden field. This way I eliminated the need for a setTimeout.
Thanks for your help anyway.
 
Upvote 0 Downvote
The defaultValue property seems to work for me.. I've never used it, so I took interest in this and whipped up a sample to save for future reference. The function would need to be expanded to include radio buttons, checkboxes, etc, but it seems to work for this purpose. If you change the contents of any of the textboxes and click the button (which is outside of the form, btw, so you could execute it from basically anywhere), it will tell you if the contents of the form changed.

Code: 
<html>
<script>
function hasitchanged() {
	obj=document.getElementById("form1");
	for(i=0; i<obj.elements.length; i++) {
		control=obj.elements[i];
		if(control.type=="text") {
			if(control.value!=control.defaultValue) {
				return true;
			}
		}
	}
	return false;
}
</script>
<body>
<form name="form1" id="form1">
<input type="text" name="t1" value="t1"><br>
<input type="text" name="t2" value="t2"><br>
<input type="text" name="t3" value="t3"><br>
<input type="text" name="t4" value="t4"><br>
<input type="text" name="t5" value="t5"><br>
</form>
<input type="button" onclick="alert(hasitchanged());" value="asdfasfdasdf">
</body>
</html>
 
Upvote 0 Downvote
I stand corrected.
Thanks to you both for the help.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Mike Lewis
  • Locked
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid) 1
Replies
5
Views
699
Mike Lewis
Mike Lewis
AbidingDude
  • Locked
  • Question
Where Does The &quot;name&quot; Attribute Stand?
Replies
1
Views
122
gmmastros
gmmastros
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
344
xwb
xwb
malpa
  • Locked
  • Question
Graph the selection of a html table row
Replies
0
Views
314
malpa
malpa
coldbohemia
  • Locked
  • Question
jquery function always returns contents of the same table cell, no matter which table cell i click
Replies
0
Views
279
coldbohemia
coldbohemia

Part and Inventory Search

Sponsor

Back
Top