Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New Coder
    Join Date
    Aug 2008
    Location
    Essex, UK
    Posts
    39
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Prompt to save dirtied form

    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.
    Last edited by urbanbutterfly; 05-22-2009 at 10:38 AM.

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    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>

  • Users who have thanked adios for this post:

    urbanbutterfly (05-21-2009)

  • #3
    New Coder
    Join Date
    Aug 2008
    Location
    Essex, UK
    Posts
    39
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Works wonderfully, thank you very much.

  • #4
    New Coder
    Join Date
    Aug 2008
    Location
    Essex, UK
    Posts
    39
    Thanks
    7
    Thanked 0 Times in 0 Posts
    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

  • #5
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    Might try submitting to a hidden iframe. This permits submission without serving an 'action' page (to the main window, anyway).

    See if this helps.

  • #6
    New Coder
    Join Date
    Aug 2008
    Location
    Essex, UK
    Posts
    39
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Thanks adios. This is a "wish-list" feature, and will be looked into when I have more time.

    Many thanks for your help.

  • #7
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Thumbs up Thank you so much Adios...

    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

  • #8
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    Been years ... glad that helped !

    cheers, adios

  • Users who have thanked adios for this post:

    sainath_nair (11-25-2009)

  • #9
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by adios View Post
    Been years ... glad that helped !

    cheers, adios

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

  • #10
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •