bah, forgot to test it, this is the fix
[jquery.git] / form / form.js
1 /**\r
2  * A method for submitting an HTML form using AJAX, as opposed to the\r
3  * standard page-load way.\r
4  *\r
5  * This method attempts to mimic the functionality of the original form\r
6  * as best as possible (duplicating the method, action, and exact contents\r
7  * of the form).\r
8  *\r
9  * There are three different resulting operations that can occur, after\r
10  * your form has been submitted.\r
11  *\r
12  * 1. The form is submitted and a callback is fired, letting you know\r
13  *    when it's done:\r
14  *    $("form").ajaxSubmit(function(){\r
15  *      alert("all done!");\r
16  *    });\r
17  *\r
18  * 2. The form is submitted and the resulting HTML contents are injected\r
19  *    into the page, at your specified location.\r
20  *    $("form").ajaxSubmit("#destination");\r
21  *\r
22  * 3. The form is submitted and the results returned from the server are\r
23  *    automatically executed (useful for having the server return more\r
24  *    Javascript commands to execute).\r
25  *    $("form").ajaxSubmit();\r
26  *\r
27  * Additionally, an optional pre-submit callback can be provided. If it,\r
28  * when called with the contents of the form, returns false, the form will\r
29  * not be submitted.\r
30  *\r
31  * Finally, both the URL and method of the form submission can be\r
32  * overidden using the 'url' and 'mth' arguments.\r
33  *\r
34  * @param target   arg for the target id element to render\r
35  * @param post_cb  callback after any results are returned\r
36  * @param pre_cb   callback function before submission\r
37  * @param url      form action override\r
38  * @param mth      form method override\r
39  * @return         "this" object\r
40  * @see            ajaxForm(), serialize(), load(), $.ajax()\r
41  * @author         Mark Constable (markc@renta.net)\r
42  * @author         G. vd Hoven, Mike Alsup, Sam Collett, John Resig\r
43  */\r
44 $.fn.ajaxSubmit = function(target, post_cb, pre_cb, url, mth) {\r
45         if ( !this.vars ) this.serialize();\r
46         \r
47         if (pre_cb && pre_cb.constructor == Function)\r
48                 if (pre_cb(this.vars) === false) return;\r
49 \r
50         var f = this.get(0);\r
51         var url = url || f.action || '';\r
52         var mth = mth || f.method || 'POST';\r
53 \r
54         if (target && target.constructor == Function) {\r
55                 $.ajax(mth, url, $.param(this.vars), target);\r
56         } else if (target && target.constructor == String) {\r
57                 $(target).load(url, this.vars, post_cb);\r
58         } else {\r
59                 this.vars.push({name: 'evaljs', value: 1});\r
60                 $.ajax(mth, url, $.param(this.vars), function(r) {\r
61                         eval(r.responseText);\r
62                 });\r
63         }\r
64 \r
65         return this;\r
66 };\r
67 \r
68 /**\r
69  * This function can be used to turn any HTML form into a form\r
70  * that submits using AJAX only.\r
71  *\r
72  * The purpose of using this method, instead of the ajaxSubmit()\r
73  * and submit() methods, is to make absolutely sure that the\r
74  * coordinates of <input type="image"/> elements are transmitted\r
75  * correctly OR figuring out exactly which <input type="submit"/>\r
76  * element was clicked to submit the form.\r
77  *\r
78  * If neither of the above points are important to you, then you'll\r
79  * probably just want to stick with the simpler ajaxSubmit() function.\r
80  *\r
81  * Usage examples, similar to ajaxSubmit():\r
82  *\r
83  * 1. Just eval the results returned from the backend.\r
84  *    $('#form-id').ajaxForm();\r
85  *\r
86  * 2. Render backend results directly to target ID (expects (x)HTML).\r
87  *    $('#form-id').ajaxForm('#target-id');\r
88  *\r
89  * 3. Submit to backend URL (form action) then call this function.\r
90  *    $('#form-id').ajaxForm(post_callback);\r
91  *\r
92  * 4. Load target ID with backend results then call a function.\r
93  *    $('#form-id').ajaxForm('#target-id', post_callback);\r
94  *\r
95  * 5. Call a browser function (for validation) and then (optionally)\r
96  *    load server results to target ID.\r
97  *    $('#form-id').ajaxForm('#target-id', null, pre_callback);\r
98  *\r
99  * 6. Call validation function first then load server results to\r
100  *    target ID and then also call a browser function.\r
101  *    $('#form-id').ajaxForm('#target-id', post_callback, pre_callback);\r
102  *\r
103  * @param target   arg for the target id element to render\r
104  * @param post_cb  callback after any results are returned\r
105  * @param pre_cb   callback function before submission\r
106  * @return         the jQuery Object\r
107  * @see            serialize(), ajaxSubmit()\r
108  * @author         Mark Constable (markc@renta.net)\r
109  * @author         G. vd Hoven, Mike Alsup, Sam Collett, John Resig\r
110  */\r
111 $.fn.ajaxForm = function(target, post_cb, pre_cb) {\r
112         return this.each(function(){\r
113                 $('input[@type="submit"],input[@type="image"]', this).click(function(ev){\r
114                         this.form.clicked = this;\r
115                         if (ev.offsetX != undefined) {\r
116                                 this.form.clicked_x = ev.offsetX;\r
117                                 this.form.clicked_y = ev.offsetY;\r
118                         } else {\r
119                                 this.form.clicked_x = ev.pageX - this.offsetLeft;\r
120                                 this.form.clicked_y = ev.pageY - this.offsetTop;\r
121                         }\r
122                 });\r
123         }).submit(function(e){\r
124                 e.preventDefault();\r
125                 $(this).ajaxSubmit(target, post_cb, pre_cb);\r
126                 return false;\r
127         });\r
128 };\r
129 \r
130 /**\r
131  * A simple wrapper function that sits around the .serialize()\r
132  * method, allowing you to easily extract the data stored within\r
133  * a form.\r
134  *\r
135  * Usage examples:\r
136  *\r
137  * 1. Serialize the contents of a form to a & and = delmited string:\r
138  *    $.param( $("form").formdata() );\r
139  *\r
140  * @return         An array of name/value pairs representing the form\r
141  * @see            serialize()\r
142  # @author         John Resig\r
143  */\r
144 $.fn.formdata = function(){\r
145         this.serialize();\r
146         return this.vars;\r
147 };\r
148 \r
149 /**\r
150  * This function gathers form element variables into an array that\r
151  * is embedded into the current "this" variable as "this.vars". It\r
152  * is normally used in conjunction with formdata() or ajaxSubmit() but can\r
153  * be used standalone as long as you don't need the x and y coordinates\r
154  * associated with an <input type="image"/> element..\r
155  *\r
156  * Standalone usage examples:\r
157  *\r
158  * 1. Gather form vars and return array to LHS variable.\r
159  *    var myform = $('#form-id').serialize();\r
160  *\r
161  * 2. Provide a serialized URL-ready string (after 1. above).\r
162  *    var mystring = $.param(myform.vars);\r
163  *\r
164  * 3. Gather form vars and send to RHS plugin via "this.vars".\r
165  *    $('#form-id').serialize().some_other_plugin();\r
166  *\r
167  * @return         the jQuery Object\r
168  * @see            ajaxForm(), ajaxSubmit()\r
169  * @author         Mark Constable (markc@renta.net)\r
170  * @author         G. vd Hoven, Mike Alsup, Sam Collett, John Resig\r
171  */\r
172 $.fn.serialize = function() {\r
173         var a = [];\r
174         var ok = {INPUT:true, TEXTAREA:true, OPTION:true};\r
175 \r
176         $('*', this).each(function() {\r
177                 if (this.disabled || this.type == 'reset' || \r
178                         (this.type == 'checkbox' && !this.checked) || \r
179                         (this.type == 'radio' && !this.checked)) return;\r
180 \r
181                 if (this.type == 'submit' || this.type == 'image') {\r
182                         if (this.form.clicked != this) return;\r
183 \r
184                         if (this.type == 'image') {\r
185                                 if (this.form.clicked_x) {\r
186                                         a.push({name: this.name+'_x', value: this.form.clicked_x});\r
187                                         a.push({name: this.name+'_y', value: this.form.clicked_y});\r
188                                         return;\r
189                                 }\r
190                         }\r
191                 }\r
192 \r
193                 if (!ok[this.nodeName.toUpperCase()])\r
194                         return;\r
195 \r
196                 var par = this.parentNode;\r
197                 var p = par.nodeName.toUpperCase();\r
198                 if ((p == 'SELECT' || p == 'OPTGROUP') && !this.selected) return;\r
199 \r
200                 var n = this.name;\r
201                 if (!n) n = (p == 'OPTGROUP') ? par.parentNode.name : par.name;\r
202                 if (n == undefined) return;\r
203 \r
204                 a.push({name: n, value: this.value});\r
205         });\r
206         \r
207         this.vars = a;\r
208 \r
209         return this;\r
210 };\r