3
* version: 2.77 (23-MAY-2011)
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 action = this.attr('action');
58
var url = (typeof action === 'string') ? $.trim(action) : '';
59
url = url || window.location.href || '';
61
// clean url (don't include hash vaue)
62
url = (url.match(/^([^#]+)/)||[])[1];
65
options = $.extend(true, {
67
success: $.ajaxSettings.success,
68
type: this[0].getAttribute('method') || 'GET', // IE7 massage (see issue 57)
69
iframeSrc: /^https/i.test(window.location.href || '') ? 'javascript:false' : 'about:blank'
72
// hook for manipulating the form data before it is extracted;
73
// convenient for use with rich editors like tinyMCE or FCKEditor
75
this.trigger('form-pre-serialize', [this, options, veto]);
77
log('ajaxSubmit: submit vetoed via form-pre-serialize trigger');
81
// provide opportunity to alter form data before it is serialized
82
if (options.beforeSerialize && options.beforeSerialize(this, options) === false) {
83
log('ajaxSubmit: submit aborted via beforeSerialize callback');
87
var n,v,a = this.formToArray(options.semantic);
89
options.extraData = options.data;
90
for (n in options.data) {
91
if(options.data[n] instanceof Array) {
92
for (var k in options.data[n]) {
93
a.push( { name: n, value: options.data[n][k] } );
98
v = $.isFunction(v) ? v() : v; // if value is fn, invoke it
99
a.push( { name: n, value: v } );
104
// give pre-submit callback an opportunity to abort the submit
105
if (options.beforeSubmit && options.beforeSubmit(a, this, options) === false) {
106
log('ajaxSubmit: submit aborted via beforeSubmit callback');
110
// fire vetoable 'validate' event
111
this.trigger('form-submit-validate', [a, this, options, veto]);
113
log('ajaxSubmit: submit vetoed via form-submit-validate trigger');
119
if (options.type.toUpperCase() == 'GET') {
120
options.url += (options.url.indexOf('?') >= 0 ? '&' : '?') + q;
121
options.data = null; // data is null for 'get'
124
options.data = q; // data is the query string for 'post'
127
var $form = this, callbacks = [];
128
if (options.resetForm) {
129
callbacks.push(function() { $form.resetForm(); });
131
if (options.clearForm) {
132
callbacks.push(function() { $form.clearForm(); });
135
// perform a load on the target only if dataType is not provided
136
if (!options.dataType && options.target) {
137
var oldSuccess = options.success || function(){};
138
callbacks.push(function(data) {
139
var fn = options.replaceTarget ? 'replaceWith' : 'html';
140
$(options.target)[fn](data).each(oldSuccess, arguments);
143
else if (options.success) {
144
callbacks.push(options.success);
147
options.success = function(data, status, xhr) { // jQuery 1.4+ passes xhr as 3rd arg
148
var context = options.context || options; // jQuery 1.4+ supports scope context
149
for (var i=0, max=callbacks.length; i < max; i++) {
150
callbacks[i].apply(context, [data, status, xhr || $form, $form]);
154
// are there files to upload?
155
var fileInputs = $('input:file', this).length > 0;
156
var mp = 'multipart/form-data';
157
var multipart = ($form.attr('enctype') == mp || $form.attr('encoding') == mp);
159
// options.iframe allows user to force iframe mode
160
// 06-NOV-09: now defaulting to iframe mode if file input is detected
161
if (options.iframe !== false && (fileInputs || options.iframe || multipart)) {
162
// hack to fix Safari hang (thanks to Tim Molendijk for this)
163
// see: http://groups.google.com/group/jquery-dev/browse_thread/thread/36395b7ab510dd5d
164
if (options.closeKeepAlive) {
165
$.get(options.closeKeepAlive, fileUpload);
175
// fire 'notify' event
176
this.trigger('form-submit-notify', [this, options]);
180
// private function for handling file uploads (hat tip to YAHOO!)
181
function fileUpload() {
182
var form = $form[0], s, g, id, $io, io, xhr, sub, n, timedOut, timeoutHandle;
184
if ($(':input[name=submit],:input[id=submit]', form).length) {
185
// if there is an input with a name or id of 'submit' then we won't be
186
// able to invoke the submit fn on the form (at least not x-browser)
187
alert('Error: Form elements must not have name or id of "submit".');
191
s = $.extend(true, {}, $.ajaxSettings, options);
192
s.context = s.context || s;
193
$io, id = 'jqFormIO' + (new Date().getTime());
194
if (s.iframeTarget) {
195
$io = $(s.iframeTarget);
196
n = $io.attr('name');
198
$io.attr('name', id);
203
$io = $('<iframe name="' + id + '" src="'+ s.iframeSrc +'" />');
204
$io.css({ position: 'absolute', top: '-1000px', left: '-1000px' });
209
xhr = { // mock object
215
getAllResponseHeaders: function() {},
216
getResponseHeader: function() {},
217
setRequestHeader: function() {},
218
abort: function(status) {
219
var e = (status === 'timeout' ? 'timeout' : 'aborted');
220
log('aborting upload... ' + e);
222
$io.attr('src', s.iframeSrc); // abort op in progress
224
s.error && s.error.call(s.context, xhr, e, e);
225
g && $.event.trigger("ajaxError", [xhr, s, e]);
226
s.complete && s.complete.call(s.context, xhr, e);
231
// trigger ajax global events so that activity/block indicators work like normal
232
if (g && ! $.active++) {
233
$.event.trigger("ajaxStart");
236
$.event.trigger("ajaxSend", [xhr, s]);
239
if (s.beforeSend && s.beforeSend.call(s.context, xhr, s) === false) {
249
// add submitting element to data if we know it
253
if (n && !sub.disabled) {
254
s.extraData = s.extraData || {};
255
s.extraData[n] = sub.value;
256
if (sub.type == "image") {
257
s.extraData[n+'.x'] = form.clk_x;
258
s.extraData[n+'.y'] = form.clk_y;
263
// take a breath so that pending repaints get some cpu time before the upload starts
264
function doSubmit() {
265
// make sure form attrs are set
266
var t = $form.attr('target'), a = $form.attr('action');
268
// update form attrs in IE friendly way
269
form.setAttribute('target',id);
270
if (form.getAttribute('method') != 'POST') {
271
form.setAttribute('method', 'POST');
273
if (form.getAttribute('action') != s.url) {
274
form.setAttribute('action', s.url);
277
// ie borks in some cases when setting encoding
278
if (! s.skipEncodingOverride) {
280
encoding: 'multipart/form-data',
281
enctype: 'multipart/form-data'
287
timeoutHandle = setTimeout(function() { timedOut = true; cb(true); }, s.timeout);
290
// add "extra" data to form if provided in options
291
var extraInputs = [];
294
for (var n in s.extraData) {
296
$('<input type="hidden" name="'+n+'" value="'+s.extraData[n]+'" />')
301
if (!s.iframeTarget) {
302
// add iframe to doc and submit the form
303
$io.appendTo('body');
304
io.attachEvent ? io.attachEvent('onload', cb) : io.addEventListener('load', cb, false);
309
// reset attrs and remove "extra" input elements
310
form.setAttribute('action',a);
312
form.setAttribute('target', t);
314
$form.removeAttr('target');
316
$(extraInputs).remove();
324
setTimeout(doSubmit, 10); // this lets dom updates render
327
var data, doc, domCheckCount = 50, callbackProcessed;
330
if (xhr.aborted || callbackProcessed) {
333
if (e === true && xhr) {
334
xhr.abort('timeout');
338
var doc = io.contentWindow ? io.contentWindow.document : io.contentDocument ? io.contentDocument : io.document;
339
if (!doc || doc.location.href == s.iframeSrc) {
340
// response not received yet
344
io.detachEvent ? io.detachEvent('onload', cb) : io.removeEventListener('load', cb, false);
346
var status = 'success', errMsg;
352
var isXml = s.dataType == 'xml' || doc.XMLDocument || $.isXMLDoc(doc);
354
if (!isXml && window.opera && (doc.body == null || doc.body.innerHTML == '')) {
355
if (--domCheckCount) {
356
// in some browsers (Opera) the iframe DOM is not always traversable when
357
// the onload callback fires, so we loop a bit to accommodate
358
log('requeing onLoad callback, DOM not available');
362
// let this fall through because server response could be an empty document
363
//log('Could not access iframe DOM after mutiple tries.');
364
//throw 'DOMException: not available';
367
//log('response detected');
368
var docRoot = doc.body ? doc.body : doc.documentElement;
369
xhr.responseText = docRoot ? docRoot.innerHTML : null;
370
xhr.responseXML = doc.XMLDocument ? doc.XMLDocument : doc;
373
xhr.getResponseHeader = function(header){
374
var headers = {'content-type': s.dataType};
375
return headers[header];
377
// support for XHR 'status' & 'statusText' emulation :
379
xhr.status = Number( docRoot.getAttribute('status') ) || xhr.status;
380
xhr.statusText = docRoot.getAttribute('statusText') || xhr.statusText;
382
var scr = /(json|script|text)/.test(s.dataType.toLowerCase());
383
if (scr || s.textarea) {
384
// see if user embedded response in textarea
385
var ta = doc.getElementsByTagName('textarea')[0];
387
xhr.responseText = ta.value;
388
// support for XHR 'status' & 'statusText' emulation :
389
xhr.status = Number( ta.getAttribute('status') ) || xhr.status;
390
xhr.statusText = ta.getAttribute('statusText') || xhr.statusText;
393
// account for browsers injecting pre around json response
394
var pre = doc.getElementsByTagName('pre')[0];
395
var b = doc.getElementsByTagName('body')[0];
397
xhr.responseText = pre.textContent ? pre.textContent : pre.innerHTML;
400
xhr.responseText = b.innerHTML;
404
else if (s.dataType == 'xml' && !xhr.responseXML && xhr.responseText != null) {
405
xhr.responseXML = toXml(xhr.responseText);
409
data = httpData(xhr, s.dataType, s);
412
status = 'parsererror';
413
xhr.error = errMsg = (e || status);
417
log('error caught',e);
419
xhr.error = errMsg = (e || status);
423
log('upload aborted');
426
if (xhr.status) { // we've set xhr.status
427
status = (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) ? 'success' : 'error';
430
// ordering of these callbacks/triggers is odd, but that's how $.ajax does it
431
if (status === 'success') {
432
s.success && s.success.call(s.context, data, 'success', xhr);
433
g && $.event.trigger("ajaxSuccess", [xhr, s]);
436
if (errMsg == undefined)
437
errMsg = xhr.statusText;
438
s.error && s.error.call(s.context, xhr, status, errMsg);
439
g && $.event.trigger("ajaxError", [xhr, s, errMsg]);
442
g && $.event.trigger("ajaxComplete", [xhr, s]);
444
if (g && ! --$.active) {
445
$.event.trigger("ajaxStop");
448
s.complete && s.complete.call(s.context, xhr, status);
450
callbackProcessed = true;
452
clearTimeout(timeoutHandle);
455
setTimeout(function() {
458
xhr.responseXML = null;
462
var toXml = $.parseXML || function(s, doc) { // use parseXML if available (jQuery 1.5+)
463
if (window.ActiveXObject) {
464
doc = new ActiveXObject('Microsoft.XMLDOM');
469
doc = (new DOMParser()).parseFromString(s, 'text/xml');
471
return (doc && doc.documentElement && doc.documentElement.nodeName != 'parsererror') ? doc : null;
473
var parseJSON = $.parseJSON || function(s) {
474
return window['eval']('(' + s + ')');
477
var httpData = function( xhr, type, s ) { // mostly lifted from jq1.4.4
479
var ct = xhr.getResponseHeader('content-type') || '',
480
xml = type === 'xml' || !type && ct.indexOf('xml') >= 0,
481
data = xml ? xhr.responseXML : xhr.responseText;
483
if (xml && data.documentElement.nodeName === 'parsererror') {
484
$.error && $.error('parsererror');
486
if (s && s.dataFilter) {
487
data = s.dataFilter(data, type);
489
if (typeof data === 'string') {
490
if (type === 'json' || !type && ct.indexOf('json') >= 0) {
491
data = parseJSON(data);
492
} else if (type === "script" || !type && ct.indexOf("javascript") >= 0) {
502
* ajaxForm() provides a mechanism for fully automating form submission.
504
* The advantages of using this method instead of ajaxSubmit() are:
506
* 1: This method will include coordinates for <input type="image" /> elements (if the element
507
* is used to submit the form).
508
* 2. This method will include the submit element's name/value data (for the element that was
509
* used to submit the form).
510
* 3. This method binds the submit() method to the form for you.
512
* The options argument for ajaxForm works exactly as it does for ajaxSubmit. ajaxForm merely
513
* passes the options argument along after properly binding events for submit elements and
516
$.fn.ajaxForm = function(options) {
517
// in jQuery 1.3+ we can fix mistakes with the ready state
518
if (this.length === 0) {
519
var o = { s: this.selector, c: this.context };
520
if (!$.isReady && o.s) {
521
log('DOM not ready, queuing ajaxForm');
523
$(o.s,o.c).ajaxForm(options);
527
// is your DOM ready? http://docs.jquery.com/Tutorials:Introducing_$(document).ready()
528
log('terminating; zero elements found by selector' + ($.isReady ? '' : ' (DOM not ready)'));
532
return this.ajaxFormUnbind().bind('submit.form-plugin', function(e) {
533
if (!e.isDefaultPrevented()) { // if event has been canceled, don't proceed
535
$(this).ajaxSubmit(options);
537
}).bind('click.form-plugin', function(e) {
538
var target = e.target;
540
if (!($el.is(":submit,input:image"))) {
541
// is this a child element of the submit el? (ex: a span within a button)
542
var t = $el.closest(':submit');
550
if (target.type == 'image') {
551
if (e.offsetX != undefined) {
552
form.clk_x = e.offsetX;
553
form.clk_y = e.offsetY;
554
} else if (typeof $.fn.offset == 'function') { // try to use dimensions plugin
555
var offset = $el.offset();
556
form.clk_x = e.pageX - offset.left;
557
form.clk_y = e.pageY - offset.top;
559
form.clk_x = e.pageX - target.offsetLeft;
560
form.clk_y = e.pageY - target.offsetTop;
564
setTimeout(function() { form.clk = form.clk_x = form.clk_y = null; }, 100);
568
// ajaxFormUnbind unbinds the event handlers that were bound by ajaxForm
569
$.fn.ajaxFormUnbind = function() {
570
return this.unbind('submit.form-plugin click.form-plugin');
574
* formToArray() gathers form element data into an array of objects that can
575
* be passed to any of the following ajax functions: $.get, $.post, or load.
576
* Each object in the array has both a 'name' and 'value' property. An example of
577
* an array for a simple login form might be:
579
* [ { name: 'username', value: 'jresig' }, { name: 'password', value: 'secret' } ]
581
* It is this array that is passed to pre-submit callback functions provided to the
582
* ajaxSubmit() and ajaxForm() methods.
584
$.fn.formToArray = function(semantic) {
586
if (this.length === 0) {
591
var els = semantic ? form.getElementsByTagName('*') : form.elements;
596
var i,j,n,v,el,max,jmax;
597
for(i=0, max=els.length; i < max; i++) {
604
if (semantic && form.clk && el.type == "image") {
605
// handle image inputs on the fly when semantic == true
606
if(!el.disabled && form.clk == el) {
607
a.push({name: n, value: $(el).val()});
608
a.push({name: n+'.x', value: form.clk_x}, {name: n+'.y', value: form.clk_y});
613
v = $.fieldValue(el, true);
614
if (v && v.constructor == Array) {
615
for(j=0, jmax=v.length; j < jmax; j++) {
616
a.push({name: n, value: v[j]});
619
else if (v !== null && typeof v != 'undefined') {
620
a.push({name: n, value: v});
624
if (!semantic && form.clk) {
625
// input type=='image' are not found in elements array! handle it here
626
var $input = $(form.clk), input = $input[0];
628
if (n && !input.disabled && input.type == 'image') {
629
a.push({name: n, value: $input.val()});
630
a.push({name: n+'.x', value: form.clk_x}, {name: n+'.y', value: form.clk_y});
637
* Serializes form data into a 'submittable' string. This method will return a string
638
* in the format: name1=value1&name2=value2
640
$.fn.formSerialize = function(semantic) {
641
//hand off to jQuery.param for proper encoding
642
return $.param(this.formToArray(semantic));
646
* Serializes all field elements in the jQuery object into a query string.
647
* This method will return a string in the format: name1=value1&name2=value2
649
$.fn.fieldSerialize = function(successful) {
651
this.each(function() {
656
var v = $.fieldValue(this, successful);
657
if (v && v.constructor == Array) {
658
for (var i=0,max=v.length; i < max; i++) {
659
a.push({name: n, value: v[i]});
662
else if (v !== null && typeof v != 'undefined') {
663
a.push({name: this.name, value: v});
666
//hand off to jQuery.param for proper encoding
671
* Returns the value(s) of the element in the matched set. For example, consider the following form:
674
* <input name="A" type="text" />
675
* <input name="A" type="text" />
676
* <input name="B" type="checkbox" value="B1" />
677
* <input name="B" type="checkbox" value="B2"/>
678
* <input name="C" type="radio" value="C1" />
679
* <input name="C" type="radio" value="C2" />
682
* var v = $(':text').fieldValue();
683
* // if no values are entered into the text inputs
685
* // if values entered into the text inputs are 'foo' and 'bar'
688
* var v = $(':checkbox').fieldValue();
689
* // if neither checkbox is checked
691
* // if both checkboxes are checked
694
* var v = $(':radio').fieldValue();
695
* // if neither radio is checked
697
* // if first radio is checked
700
* The successful argument controls whether or not the field element must be 'successful'
701
* (per http://www.w3.org/TR/html4/interact/forms.html#successful-controls).
702
* The default value of the successful argument is true. If this value is false the value(s)
703
* for each element is returned.
705
* Note: This method *always* returns an array. If no valid value can be determined the
706
* array will be empty, otherwise it will contain one or more values.
708
$.fn.fieldValue = function(successful) {
709
for (var val=[], i=0, max=this.length; i < max; i++) {
711
var v = $.fieldValue(el, successful);
712
if (v === null || typeof v == 'undefined' || (v.constructor == Array && !v.length)) {
715
v.constructor == Array ? $.merge(val, v) : val.push(v);
721
* Returns the value of the field element.
723
$.fieldValue = function(el, successful) {
724
var n = el.name, t = el.type, tag = el.tagName.toLowerCase();
725
if (successful === undefined) {
729
if (successful && (!n || el.disabled || t == 'reset' || t == 'button' ||
730
(t == 'checkbox' || t == 'radio') && !el.checked ||
731
(t == 'submit' || t == 'image') && el.form && el.form.clk != el ||
732
tag == 'select' && el.selectedIndex == -1)) {
736
if (tag == 'select') {
737
var index = el.selectedIndex;
741
var a = [], ops = el.options;
742
var one = (t == 'select-one');
743
var max = (one ? index+1 : ops.length);
744
for(var i=(one ? index : 0); i < max; i++) {
748
if (!v) { // extra pain for IE...
749
v = (op.attributes && op.attributes['value'] && !(op.attributes['value'].specified)) ? op.text : op.value;
763
* Clears the form data. Takes the following actions on the form's input fields:
764
* - input text fields will have their 'value' property set to the empty string
765
* - select elements will have their 'selectedIndex' property set to -1
766
* - checkbox and radio inputs will have their 'checked' property set to false
767
* - inputs of type submit, button, reset, and hidden will *not* be effected
768
* - button elements will *not* be effected
770
$.fn.clearForm = function() {
771
return this.each(function() {
772
$('input,select,textarea', this).clearFields();
777
* Clears the selected form elements.
779
$.fn.clearFields = $.fn.clearInputs = function() {
780
return this.each(function() {
781
var t = this.type, tag = this.tagName.toLowerCase();
782
if (t == 'text' || t == 'password' || tag == 'textarea') {
785
else if (t == 'checkbox' || t == 'radio') {
786
this.checked = false;
788
else if (tag == 'select') {
789
this.selectedIndex = -1;
795
* Resets the form data. Causes all form elements to be reset to their original value.
797
$.fn.resetForm = function() {
798
return this.each(function() {
799
// guard against an input with the name of 'reset'
800
// note that IE reports the reset function as an 'object'
801
if (typeof this.reset == 'function' || (typeof this.reset == 'object' && !this.reset.nodeType)) {
808
* Enables or disables any matching elements.
810
$.fn.enable = function(b) {
811
if (b === undefined) {
814
return this.each(function() {
820
* Checks/unchecks any matching checkboxes or radio buttons and
821
* selects/deselects and matching option elements.
823
$.fn.selected = function(select) {
824
if (select === undefined) {
827
return this.each(function() {
829
if (t == 'checkbox' || t == 'radio') {
830
this.checked = select;
832
else if (this.tagName.toLowerCase() == 'option') {
833
var $sel = $(this).parent('select');
834
if (select && $sel[0] && $sel[0].type == 'select-one') {
835
// deselect all other options
836
$sel.find('option').selected(false);
838
this.selected = select;
843
// helper fn for console logging
844
// set $.fn.ajaxSubmit.debug to true to enable debug logging
846
if ($.fn.ajaxSubmit.debug) {
847
var msg = '[jquery.form] ' + Array.prototype.join.call(arguments,'');
848
if (window.console && window.console.log) {
849
window.console.log(msg);
851
else if (window.opera && window.opera.postError) {
852
window.opera.postError(msg);