Convert any standard HTML form to ajax by adding a few classes to the components and including this file. (see comments)

laravel-ajax-form.js

// 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);
            }

        });
    });

}