Resolved Prompt to save dirtied form

urbanbutterfly · 05-20-2009, 01:33 PM

Afternoon guys, wonder if I can get some assistance with some JavaScript I need, unfortunately my worst language.

I have a large form that needs to prompt the user to save before leaving the page, if they have edited any of the fields inside it.

Here is what I have thus far, and would like to keep it in the same format if possible:

Code:

function do_unload(){

if() {
    confirm('Changes have been made to this page. Do you wish to save them?');
    document.forms.frmlog.pAction.value='SAVE';
    document.forms.frmlog.submit();
    }
}

Code:

<body onUnload="do_unload()">

</body>

Basically, I just want to determine what inputs and selects have been changed since the page loaded, and have the logic for this in the IF statement, if that makes sense.

Thanks in advance.

adios · 05-20-2009, 06:13 PM

Think this works ...

Code:

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

function form_is_dirty(oForm)
{
   var el, opt, hasDefault, i = 0, j;
   while (el = oForm.elements[i++]) 
   {
      switch (el.getAttribute('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;
         default :
            break;
      }
   }
   return false;
}

window.onunload = function()
{
   var f = document.getElementById('frmlog');
   if (form_is_dirty(f))
   {
      if (confirm('Changes have been made to this page. Do you wish to save them?\n\n    [OK] ---> save\n    [Cancel] ---> proceed'))
      {
         f.pAction.value = 'SAVE';
         f.submit();
      }
   }
}

</script>
</head>
<body>
<a href="http://www.google.com">test link</a>
<form id="frmlog" name="frmlog" action="javascript:alert('submitted')">
<input type="text" />
<textarea rows="3" cols="8">feh!</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="reset" value="RESET" onclick="return confirm('Reset all fields?')" />
<input type="submit" value="SUBMIT" />
<input type="text" name="pAction" />
</form>
</body>
</html>

urbanbutterfly · 05-21-2009, 10:12 AM

Works wonderfully, thank you very much.

urbanbutterfly · 05-21-2009, 03:25 PM

adios: Apologies, one more question.

Is there a way upon saving to direct the user to the click they was originally leaving the form for?

I'm guessing a use of window.location but I'm not sure.

Kind regards

adios · 05-21-2009, 05:37 PM

Might try submitting to a hidden iframe. This permits submission without serving an 'action' page (to the main window, anyway).

See if this helps.

urbanbutterfly · 05-22-2009, 09:38 AM

Thanks adios. This is a "wish-list" feature, and will be looked into when I have more time.

Many thanks for your help.

sainath_nair · 11-25-2009, 06:43 AM

Thank you so much Adios....I had been searching about this for hours and then when I bumped in to this forum , I saw your post and believe me, it worked for me without any modifications.

Once again thanks.

Sai@qseap

adios · 11-25-2009, 06:51 AM

Been years ... glad that helped !

cheers, adios

sainath_nair · 11-25-2009, 09:41 AM

Quote:

Originally Posted by adios

Been years ... glad that helped !

cheers, adios

yeah ....but yet no change to the code....It works perfectly.....genius indeed

sainath_nair · 11-25-2009, 09:45 AM

Hey just another related issue ....

How to modify this event on tab change?? FYI, I am using richfaces tabs and it has an attribute 'ontableave' where we need to insert the js code.. Tried the same code but doesn't work....
Let me know if ur genius mind has some solution for this!