Check if form value changed? [Archive]

View Full Version : Check if form value changed?

Dylan Leblanc

11-26-2002, 07:01 AM

There are a few rather large forms on my website which people use to edit data. These forms load up with the existing data values already filled in, and people can change these values or leave them alone.

When they submit the form I want the browser to only send back name/value pairs where the value actually changed.

Is there any Javascript value that can be checked that will tell wether a form field's value has been changed by the user?

I realise there are other ways I could go about this, but am curious about this Javascript idea.

Adam20002

11-26-2002, 11:04 AM

You could set a function onFocus to record the value of a form element and then compare it with the value onBlur. If the values are different then mark them as changed, perhaps by recording the form elements name in an array.

Obviously the methods of recording values and comparing them would differ depending on the form elements in question.

glenngv

11-26-2002, 11:24 AM

try this:

<html>
<head>
<script>
var arrChanged = new Array();
function add2Array(elname){alert(elname)
arrChanged[arrChanged.length] = elname;
}

function disableNotChange(f){
for (var i=0;i<f.elements.length;i++){
if (f.elements[i].type=="button" || f.elements[i].type=="submit" || f.elements[i].type=="reset" || f.elements[i].type=="hidden") continue;
if (!hasChanged(f.elements[i].name)) f.elements[i].disabled=true;
}
alert("The elements not changed have been disabled.")
return false;//disable submit for testing purposes
}

function hasChanged(elname){
var found=false;
for (var j=0;j<arrChanged.length;j++){
if (elname==arrChanged[j]){
found=true;
break;
}
}
return found;
}

function putOnChange(){
var f = document.frm;
for (var i=0;i<f.elements.length;i++) {
f.elements[i].onchange=function(){add2Array(this.name)}
}
}
window.onload=putOnChange;
</script>
</head>
<body>
<form name="frm" onsubmit="return disableNotChange(this)">
<input name="t" value="textbox"><br>
<select name="s">
<option selected>item1</option>
<option>item2</option>
</select><br>
<input type="radio" name="r" checked>Radio 1<br>
<input type="radio" name="r">Radio 1<br>
<input type="checkbox" name="c">checkbox<br>
<textarea name="ta">textarea</textarea><br>
<input type="submit" name="su" value="Submit">
<input type="button" name="b" value="Button">
<input type="reset" name="re" value="Reset">
<input type="hidden" name="h" value="hidden">
</form>
</body>
</html>

Adam20002

11-26-2002, 11:52 AM

nice code glen :)

glenngv

11-27-2002, 01:17 AM

Thanks! :)
Forgot something on putOnChange() function:

function putOnChange(){
var f = document.frm;
for (var i=0;i<f.elements.length;i++) {
if (f.elements[i].type=="button" || f.elements[i].type=="submit" || f.elements[i].type=="reset" || f.elements[i].type=="hidden") continue;
f.elements[i].onchange=function(){add2Array(this.name)}
}
}

Dylan Leblanc

11-27-2002, 01:22 AM

Thanks for all this guys!

I was wondering if there was a quick and easy way to do it, but I figured it would end up being more work. Your code is very helpfull Glenn!