PDA

View Full Version : onchange event



florida
03-19-2003, 06:43 PM
I have an update form that works great but want something to check if any data changes were made to the form after hitting submit. Currently when I hit submit button I get my message "Data updated" no matter if form data was changed or not changed. I need something to check if no changes were made to the form and then give me message "No data changes made to update form". I read about "onchange" event but it doesnt seem to check if any data changes were made to the form.


Is this in the right direction and if so how do I implemented with onchange event?? I need alot of help with this.

<script language="javascript">

function check(){
if(document.theform.oldvalue.value==document.theform.newvalue.value)
{
alert("No changes made to form")

}
else
{
alert("Data updated")
}
}
</script>

Danne
03-19-2003, 09:18 PM
The onChange event is fired when the value of the element is changed. So if the user changes the content of a textbox, for example, it will fire. If he changes back to the previous value, the event will fire again.

He has changed the content, but at the end the data is the same. If you want to check if the data is the same onSubmit, you need to store the previous value on variables and then compare with the values of the form elements...

cheesebagpipe
03-20-2003, 01:36 AM
This seems to work pretty well; it puts the flag string in a hidden field, alter to suit:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>untitled</title>
<script type="text/javascript" language="javascript">

function checkF_status(oForm) {
var el, opt, i = 0, j;
while (el = oForm.elements[i++]) {
switch (el.type) {
case 'text' :
case 'textarea' :
if (el.value != el.defaultValue) return F_isChanged(oForm);
break;
case 'radio' :
case 'checkbox' :
if ((el.checked && !el.defaultChecked) || (!el.checked && el.defaultChecked)) return F_isChanged(oForm);
break;
case 'select-one' :
case 'select-multiple' :
j = 0;
while (opt = el.options[j++]) if ((opt.selected && !opt.defaultSelected) || (!opt.selected && opt.defaultSelected))
return F_isChanged(oForm);
break;
}
}
return 'unchanged';
}

function F_isChanged(oForm) {
oForm.action = 'updated_URL';
return 'updated';
}

</script>
</head>
<body>
<form action="unchanged_URL" onsubmit="F_status.value=checkF_status(this);alert(document.forms[0].action);return false;">
<textarea rows="3" cols="40">...some text</textarea><br /><br />
<input type="text" value="blah"><br /><br />
<input type="radio" name="r1" checked="checked"> foo<br />
<input type="radio" name="r1"> bar<br />
<input type="checkbox" name="c1" checked="checked"> hoo
<input type="checkbox" name="c1"> hah<br /><br />
<input type="checkbox" name="c2">eek<br /><br />
<SELECT NAME="fieldname">
<OPTION VALUE="a" SELECTED>a</OPTION>
<OPTION VALUE="b">b</OPTION>
<OPTION VALUE="c">c</OPTION>
</SELECT>
<br /><br />
<input type="hidden" name="F_status">
<input type="submit">
</form>
</body>
</html>


No such thing as an 'onchange' event (or an onclick event, or onsubmit)...these are event handler properties (Form.onsubmit, Button.onclick, etc.) Events have names like 'submit', 'click', 'mouseover'; any 'on' indicates a handler property that's called (Form.onsubmit()) when the event fires. A change event only fires when the control loses focus, after it's been altered.

florida
03-21-2003, 07:20 PM
Thanks it works in IE except for the select part.

Here is my select:

<SELECT NAME="fieldname"> <-- I also tried <select> and still doesnt work. -->
<OPTION VALUE="a" SELECTED>a</OPTION>
<OPTION VALUE="b">b</OPTION>
<OPTION VALUE="c">c</OPTION>

</SELECT>


I tried several ways but none work (always says "unchanged" even after I change something in the select form) or if I use case 'select-one' it always says updated no matter if I update or not.
case 'select-one' :
case 'select-multiple' :
case 'select name' :
case 'select-name' :
case 'name' :





Also how can I make conditions on the form where if there was no update it would do just as your script does but if there was an update I need it to go to a different action:


if (unchanged)
{
<form action="javascript:alert(document.forms[0].unchanged.value)"onsubmit="unchanged.value=isUnchanged(this)">
}
elseif(updated)
{
<FORM name="myform" action="myformADD" method="POST" enablecab="Yes" onSubmit="return anotherfunction();">
}

cheesebagpipe
03-22-2003, 12:06 AM
Hmm...your select works in all three of my versions of IE (after removing the incorrect commenting-out). Hint: it's a bad idea to simply type in guesses of property names/values, since an incorrect one will often break the program, making it impossible to diagnose the real problem. Always check the documentation!

Altered the above per your wishes; hope it's OK.

The alert(document.forms[0].action);return false; is just for demo.

If you simply want the action change, remove the hidden field, change the HTML to <form action="unchanged_URL" onsubmit="return checkF_status(this)">, change return 'unchanged'; at the end of the first function to return true; and replace this:

function F_isChanged(oForm) {
oForm.action = 'updated_URL';
return true;
}

florida
03-25-2003, 05:53 PM
Many thanks for all your assistance on this! I have learned alot from this in the past couple days.

It now works in my Netscape 4 but IE has a problem .
For IE, it doesnt send a message if anything was Not changed and goes right to the update part. But for Netscape it works just as it should (sends a message if no data was changed or goes right to my update form if something was changed). Any idea of why that is??


It seems to be a problem with this part not working in IE:

case 'select-one' :
case 'select-multiple' :
j = 0;
while (opt = e1.options[j++])
if ((opt.selected && !opt.defaultSelected) || (!opt.selected && opt.defaultSelected))
return F_isChanged(stan);
break;



Here is how the whole thing now works (in Netscape only) for my form called "stan":

function checkF_status(stan)
{
var e1, opt, i = 0, j;
while (e1 = stan.elements[i++])
{
switch (e1.type)
{
case 'text' :
case 'textarea' :
if (e1.value != e1.defaultValue)
return F_isChanged(stan);
break;

case 'radio' :
case 'checkbox' :

if ((e1.checked && !e1.defaultChecked) || (!e1.checked && e1.defaultChecked))
return F_isChanged(stan);
break;

case 'select-one' :
case 'select-multiple' :
j = 0;
while (opt = e1.options[j++])
if ((opt.selected && !opt.defaultSelected) || (!opt.selected && opt.defaultSelected))
return F_isChanged(stan);
break;

}
}
alert("No Changes were made.");
return false;

}

function F_isChanged(stan)
{
stan.action = 'stan_add.cfm';

}



//form part

<FORM name="stan" action="stan_add.cfm" method="POST" enablecab="Yes" onsubmit="return checkF_status(this);">

florida
03-25-2003, 07:30 PM
I made the mistake of testing it locally only and after putting it on server it works great in Netscape and IE. Again thanks for your answer to my problem.


If you have time can you explain what these statements are doing?


if ((e1.checked && !e1.defaultChecked) || (!e1.checked && e1.defaultChecked))

j = 0;
while (opt = e1.options[j++])
if ((opt.selected && !opt.defaultSelected) || (!opt.selected && opt.defaultSelected))

cheesebagpipe
03-25-2003, 09:48 PM
All form elements have special (read-only) properties that hold the default values for the element - that is, the original values you specified in your HTML, if any. For text-based controls (type=text/hidden or textarea) it's Input.defaultValue; for checkboxes/radios it's Input.defaultChecked; and for Select lists, each Option object representing an HTML option has an Option.defaultSelected property.

if ((el.checked && !el.defaultChecked) || (!el.checked && el.defaultChecked))

If the box/radio is checked but the default property isn't set, or vice-versa, there's been a change

j = 0;
while (opt = el.options[j++])
if ((opt.selected && !opt.defaultSelected) || (!opt.selected && opt.defaultSelected))

Loop through options, comparing as above

btw: this...<form........onsubmit="return checkF_status(this)">

passes the Form object; capture it in oForm at the other end and use that to reference the form, not it's name.

florida
03-28-2003, 02:44 PM
Thanks, now I understand it better.