SitePoint Sponsor |
|
User Tag List
Results 1 to 8 of 8
-
Dec 20, 2006, 21:01 #1
- 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++) { }
Code:function formSnapshot() { }
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; } }
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
-
Dec 20, 2006, 21:41 #2
- 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.
-
Dec 21, 2006, 00:52 #3
- Join Date
- Apr 2005
- Posts
- 86
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Perfect. Thanks very much.
-
Dec 21, 2006, 05:18 #4
- 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
-
Dec 21, 2006, 21:37 #5
- 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.
-
Dec 22, 2006, 17:09 #6
- 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
-
Dec 23, 2006, 02:37 #7
- Join Date
- Mar 2005
- Location
- USA
- Posts
- 5,482
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.
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 02: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.
-
Dec 25, 2006, 02:01 #8
- Join Date
- Apr 2005
- Posts
- 86
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Very cool. Thank you.
Bookmarks