Check to see if form is dirty [Archive]

View Full Version : Check to see if form is dirty

DiaH

11-25-2003, 05:26 PM

I have several very long forms for the user to fill out as part of a document tracking system in .net. I want to check to see if they have edited any part of the form before changing to another section of the system and prompt them to save. The prompt I have but how do I check to see if any of the form elements has been edited? I don't want to have to put keypress event for each form element. Is there a way around this?

Thanks,
Dia

adios

11-25-2003, 05:34 PM

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

function form_is_modified(oForm)
{
var el, opt, hasDefault, i = 0, j;
while (el = oForm.elements[i++]) {
switch (el.type) {
case 'text' :
case 'textarea' :
case 'hidden' :
if (!/^\s*$/.test(el.value) && el.value != el.defaultValue) return true;
break;
case 'checkbox' :
case 'radio' :
if (el.checked != el.defaultChecked) return true;
break;
case 'select-one' :
case 'select-multiple' :
j = 0, hasDefault = false;
while (opt = el.options[j++])
if (opt.defaultSelected) hasDefault = true;
j = hasDefault ? 0 : 1;
while (opt = el.options[j++])
if (opt.selected != opt.defaultSelected) return true;
break;
}
}
return false;
}

onunload = function()
{
if (form_is_modified(document.forms[0]))
if (confirm('Save changes?'))
document.forms[0].submit();
}

</script>
</head>
<body>
<form action="javascript:alert('submitted')">
<input type="text" />
<textarea rows="3" cols="8"></textarea>
<input type="hidden" value="foo" />
<input type="checkbox" checked="checked" />
<input type="checkbox" />
<input type="radio" name="r1" checked="checked" />
<input type="radio" name="r1" />
<select>
<option value="1">blah 1</option>
<option value="2">blah 2</option>
<option value="3">blah 3</option>
</select>
<select multiple="multiple">
<option value="4">blah 1</option>
<option value="5" selected="selected">blah 2</option>
<option value="6" selected="selected">blah 3</option>
</select>
<br /><br /><br />
<input type="submit" value="DONE" />
</form>
</body>
</html>

DiaH

11-25-2003, 06:53 PM

Thanks!! That works beautifully.

I thought I had to edit it to work with datagrids but I don't!

This code is awesome!! Thanks again!!!

:thumbsup: :thumbsup: :thumbsup:

Pich

08-10-2006, 08:39 PM

This code works excellent for me also, but since I am no javascript expert it is quite difficult to exactly understand how it works. Is there someone who can explain it briefly to me?

Best regards

Pich

arnyinc

08-10-2006, 09:20 PM

Even after a form field is changed you can still refer to the default value. So you loop through all the form fields and compare the current value to the default value. If they are the same, then nothing has changed. If any of them are different, you return true which, in this instance, prompts the user to save.

Pich

08-29-2006, 09:43 AM

Does anybody know of an extended solution for this problem that also manage to alert for form changes even thought the page (same page) has been reloaded?

I have some pages that need a confirm dialog when the form has changed. The page can be reloaded, for example the user have to input some values in a field to retrieve a list matching this field. If the user makes changes, retrieves the list and the page is reloaded with the new values, no confirmation will be shown since no changes has been made after the reload.

Regards

Pich