SitePoint Sponsor

User Tag List

Results 1 to 8 of 8

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2005
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Compare form field values when page loads and unloads

    Hi,

    I have a site with a few pages and different forms on each page (like lots of sites.) If a user visits a page, modifies a value in one of the form fields and then clicks away to another page without hitting save I would like to throw up an alert asking if they would like to save before changing pages.

    To do this I'm guessing I need to loop through the form values when the page loads, store the values in some sort of structure (like an array or object) and do the same when it unloads (window.onunload), and then compare the two to see if any changes were made.

    Alas, I'm not sure how to do this. I know how to loop through a form. Just do something like:
    Code:
    var theForm = document.forms[0];
    for(i=0; i<theForm.elements.length; i++) {
    }
    One way I tried is to make an object like:
    Code:
    function formSnapshot() {
    
    }
    and then when the page loads create a new instance, and add properties using the prototype, like this:
    Code:
    
    function cacheFormValues() {
    
      var snapshot = new formSnapshot();
    
      var theForm = document.forms[0];
      var propertyName = new Array();
      for(i=0; i<theForm.elements.length; i++) {
    
        propertyName[i] = theForm.elements[i].name;
        snapshot.prototype.propertyName[i] = theForm.elements[i].value;
    
      }
    }
    The problem is, JS won't allow me to use the line
    snapshot.prototype.propertyName[i] = theForm.elements[i].value;

    Does anyone have any ideas about how I may solve this problem, or about how to add dynamic property names to an object using object.prototype.dynamic_name ?

    t {H} a n K s

  2. #2
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't see any need for using prototypes.

    Check out this thread..
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  3. #3
    SitePoint Enthusiast
    Join Date
    Apr 2005
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Perfect. Thanks very much.

  4. #4
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There is no need store the values once the page loads. They are automatically stored in defaultValue property for text text fields, defaultSelected for dropdowns etc

  5. #5
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    effex0r, you're welcome

    Pepejeria, the script in the thread I linked to do use the defaultValue, defaultChecked and defaultSelected properties.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  6. #6
    SitePoint Enthusiast
    Join Date
    Apr 2005
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually, I had a question about the code you posted in the other thread. In it you mention "at least one option in each select needs to have selected="selected" for it to work properly in IE."

    The system I am working does not always have that in every select (it does is some). Is there any way around this? That is, is there a way to make this work for any "select" element?

    Also, what does this do?
    f.type.indexOf('select') != -1

    t h a n k S

  7. #7
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by effex0r View Post
    Actually, I had a question about the code you posted in the other thread. In it you mention "at least one option in each select needs to have selected="selected" for it to work properly in IE."

    The system I am working does not always have that in every select (it does is some). Is there any way around this? That is, is there a way to make this work for any "select" element?
    the script will always trigger on a select that doesn't have an option set to be selected by default. You could set the first option in the <select> as selected.

    Quote Originally Posted by effex0r View Post
    Also, what does this do?
    f.type.indexOf('select') != -1
    Normal select elements have a type of "select-one". Select elements that are set to multiple have a type of "select-multiple", so that tells if the element is either.

    Edit: Here's an updated version of the script that should fix the issue of not having an element with defaultSelected=true

    Code:
    function unloadCheck() {
      // onunload doesn't work for this; you have to use onbeforeunload
      // IE4+/Win, Firefox, Mozilla 1.7a+, Netscape 7.2+, and Safari 1.3+ support 
      // onbeforeunload. Konqueror 3.3+ seems to have this functionality built-in
      // but does not support this event.
      var flds = document.form1.elements;
      var msg = 'custom message'; // false
      var f,hasDefault,aLen;
      for(var i=0;i<flds.length;i++) {
        f = flds[i];
        if(typeof(f.type)!='string') continue; // to ignore fieldset elements
        if((f.type == 'password') || (f.type == 'text') || (f.type == 'textarea')) {
          if(f.value != f.defaultValue) { return msg; }
        } else if((f.type == 'checkbox') || (f.type == 'radio')) {
          if(f.checked != f.defaultChecked) { return msg; }
        } else if(f.type.indexOf('select') != -1) {
          hasDefault = 0,aLen = f.length;
          for(var j=0;j<aLen;j++)
            if(f.options[j].defaultSelected) { hasDefault = 1; break; }
          if(!hasDefault) {
            // if there is no default but an option other than the first is 
            // selected than the form was changed
            for(j=1;j<aLen;j++) if(f.options[j].selected) return msg;
            // else if any option is selected it's the first, so we temporarily
            // set the first option's defaultSelected property to true
            f.options[0].defaultSelected = true;
          }
          for(j=0;j<aLen;j++)
            if(f.options[j].selected != f.options[j].defaultSelected) return msg;
          // change the first option back to not being default
          if(!hasDefault) { f.options[0].defaultSelected = false; }
        }
      }
    }
    window.onbeforeunload = unloadCheck;
    Last edited by Kravvitz; Feb 7, 2007 at 01:23. Reason: added the line that attaches the event handler
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  8. #8
    SitePoint Enthusiast
    Join Date
    Apr 2005
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Very cool. Thank you.


Bookmarks

Posting Permissions

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