jQuery extender submit form with ajax without reload page.

jQuery-ajax-form.js

$(function(){
	$.fn.extend({
		/* A kit of jQuery extensions for an forms manipulation via Ajax
		* https://gist.github.com/MrSwed/2d86f2f0fd96fdc1e81aa414f0d53881
		*/
		"class": function(){
			/* jQuery-class-extender: Get className even is empty jQuery object https://gist.github.com/MrSwed/0a837b3acbfbf8cfb19e */
			return $(this).attr("class") ||
				$(this).selector.toString().replace(/^.*[\s]+([^\s])/, "$1").replace(/(^[^\.]+\.|[:][^\s]+)/, "").split(".")
					.join(" ").trim();
		},
		"ajaxForm": function(p){
			/* Submit an form without reload page. Place sent by ajax result in it place 
				* Can be applied to "form" tag or it parent
				* https://gist.github.com/MrSwed/2d86f2f0fd96fdc1e81aa414f0d53881
				* Examples: $(".leftCol .form").ajaxForm({"inner": ".inner", "part": ".inner >*"});
				*           $("form").ajaxForm();
				* Required: jQuery-class-extender: Get className even is empty jQuery object
				*           https://gist.github.com/MrSwed/0a837b3acbfbf8cfb19e
				*/
			if (typeof p === "string") p = {"part": p};
			return $(this).each(function(){
				var _t = this;
				_t.p = $.extend({}, {
					"part": "",  // form container part selector from received data (for example "form.order"). Empty for all content.
					"inner": "", //  selector for received data (default replace self form)
					"message": ".message", // default selector for message (will be created, if not exist), empty - no system message
					"loading": "ajaxLoading", // class name this while "loading.."
					"afterSubmit": false
				}, p);
				_t.formInit = function(){
					/* form ajax initialization */
					_t.form = $(_t).is("form") ? $(_t) : $("form", _t);
					_t.inner = _t.p.inner ? $(_t.p.inner, _t) : _t;
					_t.message = _t.p.message ? $(_t.p.message, _t) : false;
					_t.userFields = $("[name]",_t.form).filter(function(){return !$(this).attr("readonly")});
					$(_t.form).submit(function(e){
						if (_t.busy) return !(console.log("Form in sending status now") || 1);
						e.preventDefault();
						var f = $(this);
						_t.busy = "sending";
						_t.userFields.attr("readonly", true);
						if (_t.p.loading) $(_t).toggleClass(_t.p.loading);
						$.ajax({
							type: f.attr("method"),
							url: f.attr("action"),
							cache: false,
							processData: false,
							contentType: false,
							data: new FormData(f.get(0)),
							complete: function(jqXHR, textStatus){
								if (textStatus == "success") {
									/* initialize the resulting form in a reply */
									$(_t.inner).html(_t.p.part ? $(_t.p.part, jqXHR.responseText) : jqXHR.responseText);
									_t.formInit();
									if (_t.p.afterSubmit && typeof _t.p.afterSubmit == "function") m.each(_t.p.afterSubmit);
									if (_t.p.afterLoad && typeof _t.p.afterLoad === "function") $(_t).each(_t.p.afterLoad);
								} else if (_t.message) {
									/* show error notification */
									if (!_t.message.lenth) {
										_t.message = $("<div class='" + _t.message.class() + "'></div>")
											.prependTo(_t.inner.length ? _t.inner : _t.form);
									}
									_t.message.html("")
										.append($("<b>").html(textStatus))
										.append("<br/>" + jqXHR.status + "<br/>" + jqXHR.statusText)
										.wrapInner("<div class='error'></div>");
								}
								if (_t.p.loading) $(_t).toggleClass(_t.p.loading, false);
								_t.userFields.attr("readonly", false);
								_t.busy = null;
							}
						});
					});
				};
				_t.formInit();
			});
		},
		"ajaxFormLink": function(p){
			/* Call an form into the modal container with further sending it by ajax
				* Useful for simple implementation without having to rework the server side
				* Obtaining form occurs only once at the first initialization of modal container
				* Fork of https://gist.github.com/MrSwed/80f6132106baa916019d7b6a0c48d5c7
				* Example: $("a.feedBack").ajaxForm({"part":".feedBackForm > *"});
				* Required jQuery-modal-extender.js https://gist.github.com/MrSwed/2e64367959a60866cf30)
				*/
			if (typeof p === "string") p = {"part": p};
			return $(this).each(function(){
				var _t = this;
				_t.p = $.extend({}, {
					"part": "", // form container part selector (for example "form.order"). Empty for all content.
					"modalClass": "modal",
					"innerClass": "inner",
					"afterSubmit": false
				}, p);
				$(this).click(function(e){
						e.preventDefault();
						var m = $("div." + _t.p.modalClass.split(/\s+/).join("."));
						if (!m.size()) {
							/* init modal container */
							m = $("<div />").addClass(_t.p.modalClass).appendTo("body").append($("<div />").addClass(_t.p.innerClass));
							m[0].formInit = function(){
								/* form ajax initialization */
								$(".inner", m).ajaxForm(_t.p);
							};
							$(".inner", m).load($(this).attr("href") + (_t.p.part ? " " + _t.p.part : ""), function(){
								m.modal("open", {afterOpen: m[0].formInit});
							});
						} else m.modal("open", {
							afterOpen: function(){
								$(this).find("input:not([type='submit']),textarea").filter(":visible:first").focus()
							}
						});
					}
				)
			});
		},
		"ajaxFormInit": function(p){
			/* Initialize an form on page by ajax
				* Example:
				* <div id="feedBackForm"></div>
				* <script>
				*  (function($){
				*     $("#feedBackForm").ajaxFormInit({url:""});
				*   })(jQuery);
				* </script>
				*/
			if (typeof p === "string") p = {"part": p};
			return $(this).each(function(){
				var _t = this;
				_t.p = $.extend({}, {
					"url": "", // Type: String. A string containing the URL to which the request is sent. See $.load() documentation;
					"data": {} // Type: PlainObject or String, A plain object or string that is sent to the server with the request.
				}, p);
				if (_t.p.url) $(_t).load(_t.p.url, _t.p.data, function(){
					if (_t.p.afterLoad && typeof _t.p.afterLoad === "function") $(_t).each(_t.p.afterLoad);
					$(_t).ajaxForm(_t.p);
				});
				else $(_t).html("Error call ajaxFormInit parameters");
			});
		}

	});
});