bjdutta
asked on
onChange event to <FORM> element
Hello,
I have more than hundreds form elements (text, dropdowns, checkboxes, etc.) in a form. I want to recognize if user changes any field value. I don't want to write onChange event on each form element. I wrote onChange on <FORM> and that works perfectly in Firefox. But IE is not recognizing the change event.
Anyone has any solution?
Thanks
I have more than hundreds form elements (text, dropdowns, checkboxes, etc.) in a form. I want to recognize if user changes any field value. I don't want to write onChange event on each form element. I wrote onChange on <FORM> and that works perfectly in Firefox. But IE is not recognizing the change event.
Anyone has any solution?
Thanks
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
You can always use onkeyup , as
1. Whenever key is released it is called, (key-in data, paste by ctrl+C)
1. Whenever key is released it is called, (key-in data, paste by ctrl+C)
Here is another approach, a bit lengthy, but works for all browsers.
Here is a complete code, which does not rely on anu user interaction event tracking.
Saves the original values , compares to the field values at the time of submission.
Alerts the what has been changed.
<html>
<head>
<title>Form Confirm Document</title>
</head>
<body>
<script language="javascript">
var formFlds=null;
function formFldData (fld) {
this.name = fld.name;
this.value = fld.value;
}
function SaveChanges(theForm) {
formFlds = new Array();
if (!theForm) { return false; }
for (var ix=0; ix < theForm.elements.length; ix++) {
formFlds[ix] = new formFldData(theForm.elemen
}
}
function FindFld (fld) {
var str = null;
if (!fld) { return; }
for (var ix=0; ix < formFlds.length; ix++) {
if (!fld.name) { continue; }
if (!formFlds[ix].name) { continue; }
if (exactMatch(fld.name,formF
if (!exactMatch(fld.value,for
str = '\n Field Name:' + fld.name + '\n New Value:' + fld.value + '\n Old Value:' + formFlds[ix].value;
break;
}
}
}
return str;
}
function exactMatch(s1, s2) {
if (!s1) { return false; }
if (!s2) { return false; }
if (s1.length == s2.length) {
if (s1.match(s2) && s2.match(s1)) { return true; }
}
return false;
}
function CheckChanged(theForm) {
var changed = false;
if (!theForm) { return changed; }
var msgStr = '';
for (var ex=0; ex < theForm.elements.length; ex++) {
var str = FindFld (theForm.elements[ex]);
if (str) {
changed = true;
msgStr += str;
}
}
if (changed) {
msgStr = 'Following fields are changed\n' + msgStr;
}
else {
msgStr = 'Nothing is changed\n';
}
alert (msgStr);
return changed;
}
function submitForm(theForm) {
if (CheckChanged(theForm)) {
var conf = confirm ('Field Values changed, You want to continue');
if (!conf) { return false; }
}
return true;
}
</script>
<form name="MyForm" method="get" onsubmit="return submitForm(this);">
<br>First Name:<input type="text" name="firstname" value="FIRSTNAME">
<br>Last Name:<input type="text" name="lastname" value="LASTNAME">
<br><input type="reset" value="Reset"><input type="submit" value="Submit Form">
</form>
<script language="javascript">
if (document.MyForm) { SaveChanges(document.MyFor
</script>
</body>
</html>
Here is a complete code, which does not rely on anu user interaction event tracking.
Saves the original values , compares to the field values at the time of submission.
Alerts the what has been changed.
<html>
<head>
<title>Form Confirm Document</title>
</head>
<body>
<script language="javascript">
var formFlds=null;
function formFldData (fld) {
this.name = fld.name;
this.value = fld.value;
}
function SaveChanges(theForm) {
formFlds = new Array();
if (!theForm) { return false; }
for (var ix=0; ix < theForm.elements.length; ix++) {
formFlds[ix] = new formFldData(theForm.elemen
}
}
function FindFld (fld) {
var str = null;
if (!fld) { return; }
for (var ix=0; ix < formFlds.length; ix++) {
if (!fld.name) { continue; }
if (!formFlds[ix].name) { continue; }
if (exactMatch(fld.name,formF
if (!exactMatch(fld.value,for
str = '\n Field Name:' + fld.name + '\n New Value:' + fld.value + '\n Old Value:' + formFlds[ix].value;
break;
}
}
}
return str;
}
function exactMatch(s1, s2) {
if (!s1) { return false; }
if (!s2) { return false; }
if (s1.length == s2.length) {
if (s1.match(s2) && s2.match(s1)) { return true; }
}
return false;
}
function CheckChanged(theForm) {
var changed = false;
if (!theForm) { return changed; }
var msgStr = '';
for (var ex=0; ex < theForm.elements.length; ex++) {
var str = FindFld (theForm.elements[ex]);
if (str) {
changed = true;
msgStr += str;
}
}
if (changed) {
msgStr = 'Following fields are changed\n' + msgStr;
}
else {
msgStr = 'Nothing is changed\n';
}
alert (msgStr);
return changed;
}
function submitForm(theForm) {
if (CheckChanged(theForm)) {
var conf = confirm ('Field Values changed, You want to continue');
if (!conf) { return false; }
}
return true;
}
</script>
<form name="MyForm" method="get" onsubmit="return submitForm(this);">
<br>First Name:<input type="text" name="firstname" value="FIRSTNAME">
<br>Last Name:<input type="text" name="lastname" value="LASTNAME">
<br><input type="reset" value="Reset"><input type="submit" value="Submit Form">
</form>
<script language="javascript">
if (document.MyForm) { SaveChanges(document.MyFor
</script>
</body>
</html>
<script>
window.onload = function(){
var obj = document.forms[0];
for(var i=0; i<obj.length; i++){
obj.elements[i].onChange = function(){
alert(this.name + 'has changed!');
}
}
}
</script>