Sunday, January 15, 2006

Has form data changed?

I recently came across a situation where it was required that form should be submitted only if there was any change of data in the form-fields, and there were some 90 fields in the form! So, what to do? Checking 90 fields manually was simply out of question for me, as for this, I had to take care of their initial value (when page was rendered). So, I decided to dig a deep into Javascript and look for some sort of solution there. And it was their already!!!
For every HTML control, we know there is an ID, name, type and value attached to it. What is not known to all is that there is a 'defaultValue' as well for each control. So, using this 'default' behavior, we can check if there is a change in form-data.



/**
* Checks if the form data is changed
* @ param - none
* @returns boolean
*/
function isFormChanged() {
var formNo=document.forms.length;
var flag = true;
for (j=0;j var max = document.forms[j].elements.length;
for(var i=0; i< max; i++) {
if (document.forms[j].elements[i].type =="textarea" || document.forms[j].elements[i].type =="text") {
if(document.forms[j].elements[i].value != document.forms[j].elements[i].defaultValue) {
return true;
}
}
if (document.forms[j].elements[i].type =="select-one") {
if(document.forms[j].elements[i].options[document.forms[j].elements[i].selectedIndex].selected != document.forms[j].elements[i].options[document.forms[j].elements[i].selectedIndex].defaultSelected) {
return true;
}
}
if (document.forms[j].elements[i].type =="select-multiple") {
if(document.forms[j].elements[i].options[document.forms[j].elements[i].selectedIndex].selected != document.forms[j].elements[i].options[document.forms[j].elements[i].selectedIndex].defaultSelected ) {
return true;
}
}
if (document.forms[j].elements[i].type =="checkbox" || document.forms[j].elements[i].type =="radio") {
if(document.forms[j].elements[i].checked != document.forms[j].elements[i].defaultChecked) {
return true;
}
}
}
}
return false;
}



So, as u can see the default behavior of textfield, textarea, radio button and checkbox has been used to arrive at this simple solution! You can even exclude certain controls from the check where the value has been assigned using javascript (i.e. once the page has already been rendered).

A

Popular Posts (Last 30 days)

This is a personal blog and I do not speak for my employer.