3 * version: 2.49 (18-OCT-2010)
4 * @requires jQuery v1.3.2 or later
6 * Examples and documentation at: http://malsup.com/jquery/form/
7 * Dual licensed under the MIT and GPL licenses:
8 * http://www.opensource.org/licenses/mit-license.php
9 * http://www.gnu.org/licenses/gpl.html
16 Do not use both ajaxSubmit and ajaxForm on the same form. These
17 functions are intended to be exclusive. Use ajaxSubmit if you want
18 to bind your own submit handler to the form. For example,
20 $(document).ready(function() {
21 $('#myForm').bind('submit', function(e) {
22 e.preventDefault(); // <-- important
29 Use ajaxForm when you want the plugin to manage all the event binding
32 $(document).ready(function() {
33 $('#myForm').ajaxForm({
38 When using ajaxForm, the ajaxSubmit function will be invoked for you
39 at the appropriate time.
43 * ajaxSubmit() provides a mechanism for immediately submitting
44 * an HTML form using AJAX.
46 $.fn.ajaxSubmit = function(options) {
47 // fast fail if nothing selected (http://dev.jquery.com/ticket/2752)
49 log('ajaxSubmit: skipping submit process - no element selected');
53 if (typeof options == 'function') {
54 options = { success: options };
57 var url = $.trim(this.attr('action'));
59 // clean url (don't include hash vaue)
60 url = (url.match(/^([^#]+)/)||[])[1];
62 url = url || window.location.href || '';
64 options = $.extend(true, {
66 type: this.attr('method') || 'GET',
67 iframeSrc: /^https/i.test(window.location.href || '') ? 'javascript:false' : 'about:blank'
70 // hook for manipulating the form data before it is extracted;
71 // convenient for use with rich editors like tinyMCE or FCKEditor
73 this.trigger('form-pre-serialize', [this, options, veto]);
75 log('ajaxSubmit: submit vetoed via form-pre-serialize trigger');
79 // provide opportunity to alter form data before it is serialized
80 if (options.beforeSerialize && options.beforeSerialize(this, options) === false) {
81 log('ajaxSubmit: submit aborted via beforeSerialize callback');
85 var n,v,a = this.formToArray(options.semantic);
87 options.extraData = options.data;
88 for (n in options.data) {
89 if(options.data[n] instanceof Array) {
90 for (var k in options.data[n]) {
91 a.push( { name: n, value: options.data[n][k] } );
96 v = $.isFunction(v) ? v() : v; // if value is fn, invoke it
97 a.push( { name: n, value: v } );
102 // give pre-submit callback an opportunity to abort the submit
103 if (options.beforeSubmit && options.beforeSubmit(a, this, options) === false) {
104 log('ajaxSubmit: submit aborted via beforeSubmit callback');
108 // fire vetoable 'validate' event
109 this.trigger('form-submit-validate', [a, this, options, veto]);
111 log('ajaxSubmit: submit vetoed via form-submit-validate trigger');
117 if (options.type.toUpperCase() == 'GET') {
118 options.url += (options.url.indexOf('?') >= 0 ? '&' : '?') + q;
119 options.data = null; // data is null for 'get'
122 options.data = q; // data is the query string for 'post'
125 var $form = this, callbacks = [];
126 if (options.resetForm) {
127 callbacks.push(function() { $form.resetForm(); });
129 if (options.clearForm) {
130 callbacks.push(function() { $form.clearForm(); });
133 // perform a load on the target only if dataType is not provided
134 if (!options.dataType && options.target) {
135 var oldSuccess = options.success || function(){};
136 callbacks.push(function(data) {
137 var fn = options.replaceTarget ? 'replaceWith' : 'html';
138 $(options.target)[fn](data).each(oldSuccess, arguments);
141 else if (options.success) {
142 callbacks.push(options.success);
145 options.success = function(data, status, xhr) { // jQuery 1.4+ passes xhr as 3rd arg
146 var context = options.context || options; // jQuery 1.4+ supports scope context
147 for (var i=0, max=callbacks.length; i < max; i++) {
148 callbacks[i].apply(context, [data, status, xhr || $form, $form]);
152 // are there files to upload?
153 var fileInputs = $('input:file', this).length > 0;
154 var mp = 'multipart/form-data';
155 var multipart = ($form.attr('enctype') == mp || $form.attr('encoding') == mp);
157 // options.iframe allows user to force iframe mode
158 // 06-NOV-09: now defaulting to iframe mode if file input is detected
159 if (options.iframe !== false && (fileInputs || options.iframe || multipart)) {
160 // hack to fix Safari hang (thanks to Tim Molendijk for this)
161 // see: http://groups.google.com/group/jquery-dev/browse_thread/thread/36395b7ab510dd5d
162 if (options.closeKeepAlive) {
163 $.get(options.closeKeepAlive, fileUpload);
173 // fire 'notify' event
174 this.trigger('form-submit-notify', [this, options]);
178 // private function for handling file uploads (hat tip to YAHOO!)
179 function fileUpload() {
182 if ($(':input[name=submit],:input[id=submit]', form).length) {
183 // if there is an input with a name or id of 'submit' then we won't be
184 // able to invoke the submit fn on the form (at least not x-browser)
185 alert('Error: Form elements must not have name or id of "submit".');
189 var s = $.extend(true, {}, $.ajaxSettings, options);
190 s.context = s.context || s;
191 var id = 'jqFormIO' + (new Date().getTime()), fn = '_'+id;
192 window[fn] = function() {
193 var f = $io.data('form-plugin-onload');
196 window[fn] = undefined;
197 try { delete window[fn]; } catch(e){}
200 var $io = $('<iframe id="' + id + '" name="' + id + '" src="'+ s.iframeSrc +'" onload="window[\'_\'+this.id]()" />');
203 $io.css({ position: 'absolute', top: '-1000px', left: '-1000px' });
205 var xhr = { // mock object
211 getAllResponseHeaders: function() {},
212 getResponseHeader: function() {},
213 setRequestHeader: function() {},
216 $io.attr('src', s.iframeSrc); // abort op in progress
221 // trigger ajax global events so that activity/block indicators work like normal
222 if (g && ! $.active++) {
223 $.event.trigger("ajaxStart");
226 $.event.trigger("ajaxSend", [xhr, s]);
229 if (s.beforeSend && s.beforeSend.call(s.context, xhr, s) === false) {
239 var cbInvoked = false;
242 // add submitting element to data if we know it
246 if (n && !sub.disabled) {
247 s.extraData = s.extraData || {};
248 s.extraData[n] = sub.value;
249 if (sub.type == "image") {
250 s.extraData[n+'.x'] = form.clk_x;
251 s.extraData[n+'.y'] = form.clk_y;
256 // take a breath so that pending repaints get some cpu time before the upload starts
257 function doSubmit() {
258 // make sure form attrs are set
259 var t = $form.attr('target'), a = $form.attr('action');
261 // update form attrs in IE friendly way
262 form.setAttribute('target',id);
263 if (form.getAttribute('method') != 'POST') {
264 form.setAttribute('method', 'POST');
266 if (form.getAttribute('action') != s.url) {
267 form.setAttribute('action', s.url);
270 // ie borks in some cases when setting encoding
271 if (! s.skipEncodingOverride) {
273 encoding: 'multipart/form-data',
274 enctype: 'multipart/form-data'
280 setTimeout(function() { timedOut = true; cb(); }, s.timeout);
283 // add "extra" data to form if provided in options
284 var extraInputs = [];
287 for (var n in s.extraData) {
289 $('<input type="hidden" name="'+n+'" value="'+s.extraData[n]+'" />')
294 // add iframe to doc and submit the form
295 $io.appendTo('body');
296 $io.data('form-plugin-onload', cb);
300 // reset attrs and remove "extra" input elements
301 form.setAttribute('action',a);
303 form.setAttribute('target', t);
305 $form.removeAttr('target');
307 $(extraInputs).remove();
315 setTimeout(doSubmit, 10); // this lets dom updates render
318 var data, doc, domCheckCount = 50;
325 $io.removeData('form-plugin-onload');
332 // extract the server response from the iframe
333 doc = io.contentWindow ? io.contentWindow.document : io.contentDocument ? io.contentDocument : io.document;
335 var isXml = s.dataType == 'xml' || doc.XMLDocument || $.isXMLDoc(doc);
337 if (!isXml && window.opera && (doc.body == null || doc.body.innerHTML == '')) {
338 if (--domCheckCount) {
339 // in some browsers (Opera) the iframe DOM is not always traversable when
340 // the onload callback fires, so we loop a bit to accommodate
341 log('requeing onLoad callback, DOM not available');
345 // let this fall through because server response could be an empty document
346 //log('Could not access iframe DOM after mutiple tries.');
347 //throw 'DOMException: not available';
350 //log('response detected');
352 xhr.responseText = doc.documentElement ? doc.documentElement.innerHTML : null;
353 xhr.responseXML = doc.XMLDocument ? doc.XMLDocument : doc;
354 xhr.getResponseHeader = function(header){
355 var headers = {'content-type': s.dataType};
356 return headers[header];
359 var scr = /(json|script)/.test(s.dataType);
360 if (scr || s.textarea) {
361 // see if user embedded response in textarea
362 var ta = doc.getElementsByTagName('textarea')[0];
364 xhr.responseText = ta.value;
367 // account for browsers injecting pre around json response
368 var pre = doc.getElementsByTagName('pre')[0];
369 var b = doc.getElementsByTagName('body')[0];
371 xhr.responseText = pre.innerHTML;
374 xhr.responseText = b.innerHTML;
378 else if (s.dataType == 'xml' && !xhr.responseXML && xhr.responseText != null) {
379 xhr.responseXML = toXml(xhr.responseText);
381 data = $.httpData(xhr, s.dataType);
384 log('error caught:',e);
387 $.handleError(s, xhr, 'error', e);
390 // ordering of these callbacks/triggers is odd, but that's how $.ajax does it
392 s.success.call(s.context, data, 'success', xhr);
394 $.event.trigger("ajaxSuccess", [xhr, s]);
398 $.event.trigger("ajaxComplete", [xhr, s]);
400 if (g && ! --$.active) {
401 $.event.trigger("ajaxStop");
404 s.complete.call(s.context, xhr, ok ? 'success' : 'error');
408 setTimeout(function() {
409 $io.removeData('form-plugin-onload');
411 xhr.responseXML = null;
415 function toXml(s, doc) {
416 if (window.ActiveXObject) {
417 doc = new ActiveXObject('Microsoft.XMLDOM');
422 doc = (new DOMParser()).parseFromString(s, 'text/xml');
424 return (doc && doc.documentElement && doc.documentElement.tagName != 'parsererror') ? doc : null;
430 * ajaxForm() provides a mechanism for fully automating form submission.
432 * The advantages of using this method instead of ajaxSubmit() are:
434 * 1: This method will include coordinates for <input type="image" /> elements (if the element
435 * is used to submit the form).
436 * 2. This method will include the submit element's name/value data (for the element that was
437 * used to submit the form).
438 * 3. This method binds the submit() method to the form for you.
440 * The options argument for ajaxForm works exactly as it does for ajaxSubmit. ajaxForm merely
441 * passes the options argument along after properly binding events for submit elements and
444 $.fn.ajaxForm = function(options) {
445 // in jQuery 1.3+ we can fix mistakes with the ready state
446 if (this.length === 0) {
447 var o = { s: this.selector, c: this.context };
448 if (!$.isReady && o.s) {
449 log('DOM not ready, queuing ajaxForm');
451 $(o.s,o.c).ajaxForm(options);
455 // is your DOM ready? http://docs.jquery.com/Tutorials:Introducing_$(document).ready()
456 log('terminating; zero elements found by selector' + ($.isReady ? '' : ' (DOM not ready)'));
460 return this.ajaxFormUnbind().bind('submit.form-plugin', function(e) {
461 if (!e.isDefaultPrevented()) { // if event has been canceled, don't proceed
463 $(this).ajaxSubmit(options);
465 }).bind('click.form-plugin', function(e) {
466 var target = e.target;
468 if (!($el.is(":submit,input:image"))) {
469 // is this a child element of the submit el? (ex: a span within a button)
470 var t = $el.closest(':submit');
478 if (target.type == 'image') {
479 if (e.offsetX != undefined) {
480 form.clk_x = e.offsetX;
481 form.clk_y = e.offsetY;
482 } else if (typeof $.fn.offset == 'function') { // try to use dimensions plugin
483 var offset = $el.offset();
484 form.clk_x = e.pageX - offset.left;
485 form.clk_y = e.pageY - offset.top;
487 form.clk_x = e.pageX - target.offsetLeft;
488 form.clk_y = e.pageY - target.offsetTop;
492 setTimeout(function() { form.clk = form.clk_x = form.clk_y = null; }, 100);
496 // ajaxFormUnbind unbinds the event handlers that were bound by ajaxForm
497 $.fn.ajaxFormUnbind = function() {
498 return this.unbind('submit.form-plugin click.form-plugin');
502 * formToArray() gathers form element data into an array of objects that can
503 * be passed to any of the following ajax functions: $.get, $.post, or load.
504 * Each object in the array has both a 'name' and 'value' property. An example of
505 * an array for a simple login form might be:
507 * [ { name: 'username', value: 'jresig' }, { name: 'password', value: 'secret' } ]
509 * It is this array that is passed to pre-submit callback functions provided to the
510 * ajaxSubmit() and ajaxForm() methods.
512 $.fn.formToArray = function(semantic) {
514 if (this.length === 0) {
519 var els = semantic ? form.getElementsByTagName('*') : form.elements;
524 var i,j,n,v,el,max,jmax;
525 for(i=0, max=els.length; i < max; i++) {
532 if (semantic && form.clk && el.type == "image") {
533 // handle image inputs on the fly when semantic == true
534 if(!el.disabled && form.clk == el) {
535 a.push({name: n, value: $(el).val()});
536 a.push({name: n+'.x', value: form.clk_x}, {name: n+'.y', value: form.clk_y});
541 v = $.fieldValue(el, true);
542 if (v && v.constructor == Array) {
543 for(j=0, jmax=v.length; j < jmax; j++) {
544 a.push({name: n, value: v[j]});
547 else if (v !== null && typeof v != 'undefined') {
548 a.push({name: n, value: v});
552 if (!semantic && form.clk) {
553 // input type=='image' are not found in elements array! handle it here
554 var $input = $(form.clk), input = $input[0];
556 if (n && !input.disabled && input.type == 'image') {
557 a.push({name: n, value: $input.val()});
558 a.push({name: n+'.x', value: form.clk_x}, {name: n+'.y', value: form.clk_y});
565 * Serializes form data into a 'submittable' string. This method will return a string
566 * in the format: name1=value1&name2=value2
568 $.fn.formSerialize = function(semantic) {
569 //hand off to jQuery.param for proper encoding
570 return $.param(this.formToArray(semantic));
574 * Serializes all field elements in the jQuery object into a query string.
575 * This method will return a string in the format: name1=value1&name2=value2
577 $.fn.fieldSerialize = function(successful) {
579 this.each(function() {
584 var v = $.fieldValue(this, successful);
585 if (v && v.constructor == Array) {
586 for (var i=0,max=v.length; i < max; i++) {
587 a.push({name: n, value: v[i]});
590 else if (v !== null && typeof v != 'undefined') {
591 a.push({name: this.name, value: v});
594 //hand off to jQuery.param for proper encoding
599 * Returns the value(s) of the element in the matched set. For example, consider the following form:
602 * <input name="A" type="text" />
603 * <input name="A" type="text" />
604 * <input name="B" type="checkbox" value="B1" />
605 * <input name="B" type="checkbox" value="B2"/>
606 * <input name="C" type="radio" value="C1" />
607 * <input name="C" type="radio" value="C2" />
610 * var v = $(':text').fieldValue();
611 * // if no values are entered into the text inputs
613 * // if values entered into the text inputs are 'foo' and 'bar'
616 * var v = $(':checkbox').fieldValue();
617 * // if neither checkbox is checked
619 * // if both checkboxes are checked
622 * var v = $(':radio').fieldValue();
623 * // if neither radio is checked
625 * // if first radio is checked
628 * The successful argument controls whether or not the field element must be 'successful'
629 * (per http://www.w3.org/TR/html4/interact/forms.html#successful-controls).
630 * The default value of the successful argument is true. If this value is false the value(s)
631 * for each element is returned.
633 * Note: This method *always* returns an array. If no valid value can be determined the
634 * array will be empty, otherwise it will contain one or more values.
636 $.fn.fieldValue = function(successful) {
637 for (var val=[], i=0, max=this.length; i < max; i++) {
639 var v = $.fieldValue(el, successful);
640 if (v === null || typeof v == 'undefined' || (v.constructor == Array && !v.length)) {
643 v.constructor == Array ? $.merge(val, v) : val.push(v);
649 * Returns the value of the field element.
651 $.fieldValue = function(el, successful) {
652 var n = el.name, t = el.type, tag = el.tagName.toLowerCase();
653 if (successful === undefined) {
657 if (successful && (!n || el.disabled || t == 'reset' || t == 'button' ||
658 (t == 'checkbox' || t == 'radio') && !el.checked ||
659 (t == 'submit' || t == 'image') && el.form && el.form.clk != el ||
660 tag == 'select' && el.selectedIndex == -1)) {
664 if (tag == 'select') {
665 var index = el.selectedIndex;
669 var a = [], ops = el.options;
670 var one = (t == 'select-one');
671 var max = (one ? index+1 : ops.length);
672 for(var i=(one ? index : 0); i < max; i++) {
676 if (!v) { // extra pain for IE...
677 v = (op.attributes && op.attributes['value'] && !(op.attributes['value'].specified)) ? op.text : op.value;
691 * Clears the form data. Takes the following actions on the form's input fields:
692 * - input text fields will have their 'value' property set to the empty string
693 * - select elements will have their 'selectedIndex' property set to -1
694 * - checkbox and radio inputs will have their 'checked' property set to false
695 * - inputs of type submit, button, reset, and hidden will *not* be effected
696 * - button elements will *not* be effected
698 $.fn.clearForm = function() {
699 return this.each(function() {
700 $('input,select,textarea', this).clearFields();
705 * Clears the selected form elements.
707 $.fn.clearFields = $.fn.clearInputs = function() {
708 return this.each(function() {
709 var t = this.type, tag = this.tagName.toLowerCase();
710 if (t == 'text' || t == 'password' || tag == 'textarea') {
713 else if (t == 'checkbox' || t == 'radio') {
714 this.checked = false;
716 else if (tag == 'select') {
717 this.selectedIndex = -1;
723 * Resets the form data. Causes all form elements to be reset to their original value.
725 $.fn.resetForm = function() {
726 return this.each(function() {
727 // guard against an input with the name of 'reset'
728 // note that IE reports the reset function as an 'object'
729 if (typeof this.reset == 'function' || (typeof this.reset == 'object' && !this.reset.nodeType)) {
736 * Enables or disables any matching elements.
738 $.fn.enable = function(b) {
739 if (b === undefined) {
742 return this.each(function() {
748 * Checks/unchecks any matching checkboxes or radio buttons and
749 * selects/deselects and matching option elements.
751 $.fn.selected = function(select) {
752 if (select === undefined) {
755 return this.each(function() {
757 if (t == 'checkbox' || t == 'radio') {
758 this.checked = select;
760 else if (this.tagName.toLowerCase() == 'option') {
761 var $sel = $(this).parent('select');
762 if (select && $sel[0] && $sel[0].type == 'select-one') {
763 // deselect all other options
764 $sel.find('option').selected(false);
766 this.selected = select;
771 // helper fn for console logging
772 // set $.fn.ajaxSubmit.debug to true to enable debug logging
774 if ($.fn.ajaxSubmit.debug) {
775 var msg = '[jquery.form] ' + Array.prototype.join.call(arguments,'');
776 if (window.console && window.console.log) {
777 window.console.log(msg);
779 else if (window.opera && window.opera.postError) {
780 window.opera.postError(msg);