Skip to content

Instantly share code, notes, and snippets.

@mp035
Last active October 5, 2022 22:14
Show Gist options
  • Save mp035/d53026e80f743025e069473c2970f00c to your computer and use it in GitHub Desktop.
Save mp035/d53026e80f743025e069473c2970f00c to your computer and use it in GitHub Desktop.
Convert any standard HTML form to ajax by adding a few classes to the components and including this file. (see comments)
// notes on using this file:
// This file is intended to work with a standard html form the same as what you use for server side rendered laravel projects.
// The only changes you need to make to the form are:
// 1. Add the class "ajax-submit" to any form you want to be submitted via ajax.
// 2. If you have a "Cancel" button on your form, mark it with the class "form-cancel"
// 3. Add a bootstrap alert in your form, marked with the class "ajax-error-alert" and "collapse" (to keep it initally hidden). This alert will display any error messages.
// Then call the function "AttachAjaxSubmit()" after the DOM is loaded.
// NOTE: This script requires bootstrap to style the components during the submission process.
window.onload = function() {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
}
export default function AttachAjaxSubmit(){
$(".ajax-submit").submit(function(event) {
event.preventDefault(); // stop regular submission occuring.
var form = $(event.target)
var submit = form.find('button[type="submit"]');
var cancel = form.find('button.form-cancel');
submit.prop('disabled', true);
cancel.prop('disabled', true);
var submitLabel = submit.html();
submit.html('<span class="icon-clock"> Processing...</span>');
submit.removeClass('btn-primary');
submit.addClass('btn-secondary');
var method = form.attr('method');
var methodInput = form.find('input[name="_method"]');
if (methodInput.length){
method = methodInput.val();
}
form.find(".ajax-error-alert").removeClass('show');
form.find(".is-invalid").removeClass("is-invalid");
$.ajax({
url: form.attr('action'),
type:method,
data:form.serialize(),
success:function(result){
console.log(result);
submit.html('<span class="icon-ok-circle"> Success</span>');
submit.removeClass('btn-secondary');
submit.addClass('btn-success');
if (form.data('success_function')){
form.data('success_function')(result);
}
window.setTimeout(function(){
submit.html(submitLabel);
submit.removeClass('btn-success');
submit.addClass('btn-primary');
submit.prop('disabled', false);
cancel.prop('disabled', false);
}, 3000);
},
error:function(response, textStatus, errorThrown){
var validationErrors = response.responseJSON.errors;
console.log(textStatus, errorThrown);
var alert = form.find(".ajax-error-alert");
var errorsHtml = "";
$.each( validationErrors, function( key, value ) {
errorsHtml += value[0] + '</br>';
form.find('input[name="' + key + '"]').addClass('is-invalid');
});
if (! errorsHtml){
errorsHtml = errorThrown + "</br>";
}
alert.html(errorsHtml);
alert.collapse('show');
submit.html(submitLabel);
submit.removeClass('btn-secondary');
submit.addClass('btn-primary');
submit.prop('disabled', false);
}
});
});
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment