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!

  • 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

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!
 
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]
 
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.
 
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]
 
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.
 
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>
 
I stand corrected.
Thanks to you both for the help.
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top