On change for entire form

Is there a way to trigger a function anytime that any field in a form changes?

Fields can added to my form dynamically and I don't want to have to attached onchange events to every single input.
LVL 16
hankknightAsked:
Who is Participating?
 
Michel PlungjanConnect With a Mentor IT ExpertCommented:
I think you might want something like this (remove the lines with "msg" when happy:

<script type="text/javascript">
 
function changeAnyElement(e){
if(window.event) // IE
        {
        keynum = e.keyCode;
        ctrlKey  = e.ctrlKey;
        EventObj = e.srcElement;
 
        }
else if(e.which) // Netscape/Firefox/Opera
        {
        keynum = e.which;
        ctrlKey = e.ctrlKey;
        EventObj = e.target;
 
        }
        if (EventObj.type=='text' && EventObj.value!=EventObj.defaultValue) {
          document.getElementById('msg').innerHTML+= '<br> EventObj.name : ' + EventObj.name + ' changed';
          EventObj.form.setAttribute('dirty',true)
        }
 
}
window.onload=function() {
  if (document.forms[0].getAttribute('dirty')==null)
    document.forms[0].setAttribute('dirty',false) 
} 
</script>
 
 
<form name="form1" onkeyup="changeAnyElement(event);" 
onSubmit="var d = eval(this.getAttribute('dirty')); if (!d) alert('Nothing changed'); return d" dirty="false">
<input type="text" name="text1">
<input type="text" name="text2">
<input type="button" name="button1" value="button1">
<input type="submit" name="submittag">
</form>
<div id="msg"> </div>

Open in new window

0
 
fsze88Connect With a Mentor Commented:
http://www.pxl8.com/createElement.html
http://viralpatel.net/blogs/2009/01/dynamic-add-textbox-input-button-radio-element-html-javascript.html
<script type="text/javascript">
 
function changeAnyElement(e){
if(window.event) // IE
        {
        keynum = e.keyCode;
        ctrlKey  = e.ctrlKey;
        EventObj = e.srcElement;
 
        }
else if(e.which) // Netscape/Firefox/Opera
        {
        keynum = e.which;
        ctrlKey = e.ctrlKey;
        EventObj = e.target;
 
        }
        alert("EventObj.type : " + EventObj.type + " EventObj.name : " + EventObj.name);
 
}
 
</script>
 
 
<form name="form1" onkeyup="changeAnyElement(event);" onmouseup="changeAnyElement(event);" ">
<input type="text" name="text1">
<input type="button" name="button1" value="button1">
<input type="submit" name="submittag">
 
</form>

Open in new window

0
 
hankknightAuthor Commented:
fsze88, will that code make my application run sluggishly and perform badly or does it have a small footprint?
0
 
JohnSixkillerConnect With a Mentor Commented:
mplungjan's  solution is good one. Except event when user paste data into field using right mouse button.

Maybe you can disable context-menu on fields. Or Dynamicaly bind onchange event in BODY onload. :-(
If you only need to know if any data have changed before submit, use mplungjan's aproach and dynamicaly test all inputs in OnSubmit.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.