const handleForm = function(
selector = 'form',
successFunc = function(data,selector){
$(selector + ' .result').remove();
const resultMsg = 'The form submitted successfully!';
$(selector).append("<div class='result success'>'+resultMsg+'<success'>"+resultMsg+"</div>");
},
errorfunc = function(data,selector){
$(selector + ' .result').remove();
const resultMsg = data??'There a problem occured!';
$(selector).append("<div class='result error'>'+resultMsg+'<error'>"+resultMsg+"</div>");
},
beforeFunc = function(data,selector){
$(selector + ' .result').remove();
},
processHandler = function(data){},
timeout = 600000
){
$(selector).submit(function(e) {
e.preventDefault();
const form = $(this);
const actionPath = form.attr('action');
const methodName = form.attr('method');
const requestData = form.serialize();
const btns = selector+' :is(button:is([type=submit], [type=reset]), input:is([type=button], [type=submit], [type=reset]))';
$.ajax({
type: methodName,
url: actionPath,
xhr: function () {
var myXhr = $.ajaxSettings.xhr();
if (myXhr.upload) myXhr.upload.addEventListener('progress', processHandler, false);
return myXhr;
},
success: function (data) {
successFunc(data,selector);
$(btns).removeClass('hide');
$(selector).css('opacity','1');
},
error: function (data) {
errorfunc(data,selector);
$(btns).removeClass('hide');
$(selector).css('opacity','1');
},
beforeSend: function (data) {
beforeFunc(data,selector);
$(btns).addClass('hide');
$(selector).css('opacity','.5');
},
async: true,
data: requestData,
cache: false,
contentType: (typeof requestData === 'string')?'application/json; charset=utf-8':false,
processData: false,
timeout: timeout
});
});
}
const handleForm = function(
selector = 'form',
successFunc = function(data,selector){
$(selector + ' .result').remove();
const resultMsg = 'The form submitted successfully!';
$(selector).append("<div class='result success'>'+resultMsg+'</div>");
},
errorfunc = function(data,selector){
$(selector + ' .result').remove();
const resultMsg = data??'There a problem occured!';
$(selector).append("<div class='result error'>'+resultMsg+'</div>");
},
beforeFunc = function(data,selector){
$(selector + ' .result').remove();
},
processHandler = function(data){},
timeout = 600000
){
$(selector).submit(function(e) {
e.preventDefault();
const form = $(this);
const actionPath = form.attr('action');
const methodName = form.attr('method');
const requestData = form.serialize();
const btns = selector+' :is(button:is([type=submit], [type=reset]), input:is([type=button], [type=submit], [type=reset]))';
$.ajax({
type: methodName,
url: actionPath,
xhr: function () {
var myXhr = $.ajaxSettings.xhr();
if (myXhr.upload) myXhr.upload.addEventListener('progress', processHandler, false);
return myXhr;
},
success: function (data) {
successFunc(data,selector);
$(btns).removeClass('hide');
$(selector).css('opacity','1');
},
error: function (data) {
errorfunc(data,selector);
$(btns).removeClass('hide');
$(selector).css('opacity','1');
},
beforeSend: function (data) {
beforeFunc(data,selector);
$(btns).addClass('hide');
$(selector).css('opacity','.5');
},
async: true,
data: requestData,
cache: false,
contentType: (typeof requestData === 'string')?'application/json; charset=utf-8':false,
processData: false,
timeout: timeout
});
});
}
const handleForm = function(
selector = 'form',
successFunc = function(data,selector){
$(selector + ' .result').remove();
const resultMsg = 'The form submitted successfully!';
$(selector).append("<div class='result success'>"+resultMsg+"</div>");
},
errorfunc = function(data,selector){
$(selector + ' .result').remove();
const resultMsg = data??'There a problem occured!';
$(selector).append("<div class='result error'>"+resultMsg+"</div>");
},
beforeFunc = function(data,selector){
$(selector + ' .result').remove();
},
processHandler = function(data){},
timeout = 600000
){
$(selector).submit(function(e) {
e.preventDefault();
const form = $(this);
const actionPath = form.attr('action');
const methodName = form.attr('method');
const requestData = form.serialize();
const btns = selector+' :is(button:is([type=submit], [type=reset]), input:is([type=button], [type=submit], [type=reset]))';
$.ajax({
type: methodName,
url: actionPath,
xhr: function () {
var myXhr = $.ajaxSettings.xhr();
if (myXhr.upload) myXhr.upload.addEventListener('progress', processHandler, false);
return myXhr;
},
success: function (data) {
successFunc(data,selector);
$(btns).removeClass('hide');
$(selector).css('opacity','1');
},
error: function (data) {
errorfunc(data,selector);
$(btns).removeClass('hide');
$(selector).css('opacity','1');
},
beforeSend: function (data) {
beforeFunc(data,selector);
$(btns).addClass('hide');
$(selector).css('opacity','.5');
},
async: true,
data: requestData,
cache: false,
contentType: (typeof requestData === 'string')?'application/json; charset=utf-8':false,
processData: false,
timeout: timeout
});
});
}
It's a great and easy-to-use function I made to handle any forms, which you can use by just calling handleForm() function. Of course, you can send your own selector to specify the form, even your own special function to handle the success, error, etc.: (I hope it's useful)
const handleForm = function(
selector = 'form',
successFunc = function(data,selector){
$(selector + ' .result').remove();
const resultMsg = 'The form submitted successfully!';
$(selector).append("<div class='result success'>'+resultMsg+'</div>");
},
errorfunc = function(data,selector){
$(selector + ' .result').remove();
const resultMsg = data??'There a problem occured!';
$(selector).append("<div class='result error'>'+resultMsg+'</div>");
},
beforeFunc = function(data,selector){
$(selector + ' .result').remove();
},
processHandler = function(data){},
timeout = 600000
){
$(selector).submit(function(e) {
e.preventDefault();
const form = $(this);
const actionPath = form.attr('action');
const methodName = form.attr('method');
const requestData = form.serialize();
const btns = selector+' :is(button:is([type=submit], [type=reset]), input:is([type=button], [type=submit], [type=reset]))';
$.ajax({
type: methodName,
url: actionPath,
xhr: function () {
var myXhr = $.ajaxSettings.xhr();
if (myXhr.upload) myXhr.upload.addEventListener('progress', processHandler, false);
return myXhr;
},
success: function (data) {
successFunc(data,selector);
$(btns).removeClass('hide');
$(selector).css('opacity','1');
},
error: function (data) {
errorfunc(data,selector);
$(btns).removeClass('hide');
$(selector).css('opacity','1');
},
beforeSend: function (data) {
beforeFunc(data,selector);
$(btns).addClass('hide');
$(selector).css('opacity','.5');
},
async: true,
data: requestData,
cache: false,
contentType: (typeof requestData === 'string')?'application/json; charset=utf-8':false,
processData: false,
timeout: timeout
});
});
}
Enjoy...
lang-js