...

View Full Version : 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:



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();
}
}





<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 ...


<!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 (http://terminalapp.net/submitting-a-form-with-target-set-to-a-script-generated-iframe-on-ie/) 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
Been years ... glad that helped !

cheers, adios


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

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!:)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum