[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

On change for entire form

Posted on 2009-02-23
4
Medium Priority
?
204 Views
Last Modified: 2012-08-13
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.
0
Comment
Question by:hankknight
4 Comments
 
LVL 15

Assisted Solution

by:fsze88
fsze88 earned 800 total points
ID: 23710770
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
 
LVL 16

Author Comment

by:hankknight
ID: 23710886
fsze88, will that code make my application run sluggishly and perform badly or does it have a small footprint?
0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 1000 total points
ID: 23711315
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
 
LVL 11

Assisted Solution

by:JohnSixkiller
JohnSixkiller earned 200 total points
ID: 23711883
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

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

830 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question