← Back to branch summary

~kosova/+junk/tuxfamily-twiki

« back to all changes in this revision

Viewing changes to foswiki/pub/System/JavascriptFiles/foswikiForm.js

  • Committer: James Michael DuPont
  • Date: 2009-07-18 19:58:49 UTC
  • Revision ID: jamesmikedupont@gmail.com-20090718195849-vgbmaht2ys791uo2
added foswiki

Show diffs side-by-side

added added

removed removed

Lines of Context:
foswiki/pub/System/JavascriptFiles/foswikiForm.js
 
1
/**
 
2
Requires foswikiCSS.js and foswikiString.js
 
3
*/
 
4
 
 
5
var foswiki; if (foswiki == undefined) foswiki = {};
 
6
foswiki.Form = {
 
7
        
 
8
        /*
 
9
        Original js filename: formdata2querystring.js
 
10
        
 
11
        Copyright 2005 Matthew Eernisse (mde@fleegix.org)
 
12
        
 
13
        Licensed under the Apache License, Version 2.0 (the "License");
 
14
        http://www.apache.org/licenses/LICENSE-2.0
 
15
 
 
16
        Original code by Matthew Eernisse (mde@fleegix.org), March 2005
 
17
        Additional bugfixes by Mark Pruett (mark.pruett@comcast.net), 12th July 2005
 
18
        Multi-select added by Craig Anderson (craig@sitepoint.com), 24th August 2006
 
19
 
 
20
        Version 1.3
 
21
        
 
22
        Changes for Foswiki:
 
23
        Added KEYVALUEPAIR_DELIMITER and documentation by Arthur Clemens, 2006
 
24
        */
 
25
        
 
26
        KEYVALUEPAIR_DELIMITER : ";",
 
27
 
 
28
        /**
 
29
        Serializes the data from all the inputs in a Web form
 
30
        into a query-string style string.
 
31
        @param inForm : (HTMLElement) Reference to a DOM node of the form element
 
32
        @param inFormatOptions : (Object) value object of options for how to format the return string. Supported options:
 
33
                  collapseMulti: (Boolean) take values from elements that can return multiple values (multi-select, checkbox groups) and collapse into a single, comma-delimited value (e.g., thisVar=asdf,qwer,zxcv)
 
34
        @returns Query-string formatted String of variable-value pairs
 
35
        @example
 
36
        <code>
 
37
        var queryString = foswiki.Form.formData2QueryString(
 
38
                document.getElementById('myForm'),
 
39
                {collapseMulti:true}
 
40
        );
 
41
        </code>
 
42
        */
 
43
        formData2QueryString:function (inForm, inFormatOptions) {
 
44
                if (!inForm) return null;
 
45
                var opts = inFormatOptions || {};
 
46
                var str = '';
 
47
                var formElem;
 
48
                var lastElemName = '';
 
49
                
 
50
                for (i = 0; i < inForm.elements.length; i++) {
 
51
                        formElem = inForm.elements[i];
 
52
                        
 
53
                        switch (formElem.type) {
 
54
                                // Text fields, hidden form elements
 
55
                                case 'text':
 
56
                                case 'hidden':
 
57
                                case 'password':
 
58
                                case 'textarea':
 
59
                                case 'select-one':
 
60
                                        str += formElem.name
 
61
                                                + '='
 
62
                                                + encodeURI(formElem.value)
 
63
                                                + foswiki.Form.KEYVALUEPAIR_DELIMITER;
 
64
                                        break;
 
65
                                
 
66
                                // Multi-option select
 
67
                                case 'select-multiple':
 
68
                                        var isSet = false;
 
69
                                        for(var j = 0; j < formElem.options.length; j++) {
 
70
                                                var currOpt = formElem.options[j];
 
71
                                                if(currOpt.selected) {
 
72
                                                        if (opts.collapseMulti) {
 
73
                                                                if (isSet) {
 
74
                                                                        str += ','
 
75
                                                                                + encodeURI(currOpt.text);
 
76
                                                                } else {
 
77
                                                                        str += formElem.name
 
78
                                                                                + '='
 
79
                                                                                + encodeURI(currOpt.text);
 
80
                                                                        isSet = true;
 
81
                                                                }
 
82
                                                        } else {
 
83
                                                                str += formElem.name
 
84
                                                                        + '='
 
85
                                                                        + encodeURI(currOpt.text)
 
86
                                                                        + foswiki.Form.KEYVALUEPAIR_DELIMITER;
 
87
                                                        }
 
88
                                                }
 
89
                                        }
 
90
                                        if (opts.collapseMulti) {
 
91
                                                str += foswiki.Form.KEYVALUEPAIR_DELIMITER;
 
92
                                        }
 
93
                                        break;
 
94
                                
 
95
                                // Radio buttons
 
96
                                case 'radio':
 
97
                                        if (formElem.checked) {
 
98
                                                str += formElem.name
 
99
                                                        + '='
 
100
                                                        + encodeURI(formElem.value)
 
101
                                                        + foswiki.Form.KEYVALUEPAIR_DELIMITER;
 
102
                                        }
 
103
                                        break;
 
104
                                
 
105
                                // Checkboxes
 
106
                                case 'checkbox':
 
107
                                        if (formElem.checked) {
 
108
                                                // Collapse multi-select into comma-separated list
 
109
                                                if (opts.collapseMulti && (formElem.name == lastElemName)) {
 
110
                                                // Strip of end ampersand if there is one
 
111
                                                if (str.lastIndexOf('&') == str.length-1) {
 
112
                                                        str = str.substr(0, str.length - 1);
 
113
                                                }
 
114
                                                // Append value as comma-delimited string
 
115
                                                str += ','
 
116
                                                        + encodeURI(formElem.value);
 
117
                                                }
 
118
                                                else {
 
119
                                                str += formElem.name
 
120
                                                        + '='
 
121
                                                        + encodeURI(formElem.value);
 
122
                                                }
 
123
                                                str += foswiki.Form.KEYVALUEPAIR_DELIMITER;
 
124
                                                lastElemName = formElem.name;
 
125
                                        }
 
126
                                        break;
 
127
                                        
 
128
                                } // switch
 
129
                        } // for
 
130
                // Remove trailing separator
 
131
                str = str.substr(0, str.length - 1);
 
132
                return str;
 
133
        },
 
134
        
 
135
        /**
 
136
        Makes form field values safe to insert in a Foswiki table. Any table-breaking characters are replaced.
 
137
        @param inForm: (String) the form to make safe
 
138
        */
 
139
        makeSafeForTableEntry:function(inForm) {
 
140
                if (!inForm) return null;
 
141
                var formElem;
 
142
                
 
143
                for (i = 0; i < inForm.elements.length; i++) {
 
144
                        formElem = inForm.elements[i];
 
145
                        switch (formElem.type) {
 
146
                                // Text fields, hidden form elements
 
147
                                case 'text':
 
148
                                case 'password':
 
149
                                case 'textarea':
 
150
                                        formElem.value = foswiki.String.makeTextSafeForTableEntry(formElem.value);
 
151
                                        break;
 
152
                        }
 
153
                }
 
154
        },
 
155
        
 
156
        /**
 
157
        Finds the form element.
 
158
        @param inFormName : (String) name of the form
 
159
        @param inElementName : (String) name of the form element
 
160
        @return HTMLElement
 
161
        */
 
162
        getFormElement:function(inFormName, inElementName) {
 
163
                return document[inFormName][inElementName];
 
164
        },
 
165
        
 
166
        /**
 
167
        Sets input focus to input element. Note: only one field on a page can have focus.
 
168
        @param inFormName : (String) name of the form
 
169
        @param inInputFieldName : (String) name of the input field that will get focus
 
170
        */
 
171
        setFocus:function(inFormName, inInputFieldName) {
 
172
                try {
 
173
                        var el = foswiki.Form.getFormElement(inFormName, inInputFieldName);
 
174
                        el.focus();
 
175
                } catch (er) {}
 
176
        },
 
177
        
 
178
        /**
 
179
        Sets the default text of an input field (for instance the text 'Enter keyword or product number' in a search box) that is cleared when the field gets focus. The field is styled with CSS class 'foswikiInputFieldBeforeFocus'.
 
180
        @param el : (HTMLElement) the input field to receive default text
 
181
        @param inText : (String) the default text
 
182
        */
 
183
        initBeforeFocusText:function(el, inText) {
 
184
                el.FP_defaultValue = inText;
 
185
                if (!el.value || el.value == inText) {
 
186
                        foswiki.Form._setDefaultStyle(el);
 
187
                }
 
188
        },
 
189
        
 
190
        /**
 
191
        Clears the default input field text. The CSS styling 'foswikiInputFieldBeforeFocus' is removed. Call this function at 'onfocus'.
 
192
        @param el : (HTMLElement) the input field that has default text
 
193
        */
 
194
        clearBeforeFocusText:function(el) {
 
195
                if (!el.FP_defaultValue) {
 
196
                        el.FP_defaultValue = el.value;
 
197
                }
 
198
                if (el.FP_defaultValue == el.value) {
 
199
                        el.value = "";
 
200
                }
 
201
                foswiki.CSS.addClass(el, "foswikiInputFieldFocus");
 
202
                foswiki.CSS.removeClass(el, "foswikiInputFieldBeforeFocus");
 
203
        },
 
204
        
 
205
        /**
 
206
        Restores the default text when the input field is empty. Call this function at 'onblur'.
 
207
        @param el : (HTMLElement) the input field to clear
 
208
        */
 
209
        restoreBeforeFocusText:function(el) {
 
210
                if (!el.value && el.FP_defaultValue) {
 
211
                        foswiki.Form._setDefaultStyle(el);
 
212
                }
 
213
                foswiki.CSS.removeClass(el, "foswikiInputFieldFocus");
 
214
        },
 
215
        
 
216
        /**
 
217
        Sets the value and style of unfocussed or empty text field.
 
218
        @param el : (HTMLElement) the input field that has default text
 
219
        */
 
220
        _setDefaultStyle:function(el) {
 
221
                el.value = el.FP_defaultValue;
 
222
                foswiki.CSS.addClass(el, "foswikiInputFieldBeforeFocus");
 
223
        }
 
224
        
 
225
};