form js via ajax

form

/**
 * Created by sintret@gmail.com on 3/18/2018.
 * For bengkel io and other purpose only
 */
function trashImage(myValue, elmJsonImages, filename) {
    if (elmJsonImages) {
        var arr = JSON.parse($("#" + elmJsonImages).val());
        var index = arr.indexOf(filename);
        arr.splice(index, 1);
        $("#" + elmJsonImages).val(JSON.stringify(arr));
    }

    myValue.closest(".media").remove();
}

function submitForm(element, elmFiles, callback) {
    callback = callback || function () {
        }
    elmFiles = elmFiles || "";

    var form = document.getElementById(element);
    if (form) {
        var url = form.action;

        if (!url) {
            url = window.location.pathname;
        }
        var ajaxSetting = {
            type: 'POST',
            url: url,
            cache: false,
            beforeSend: function () {
                $("#modalpopup").show();
            },
            success: function (data) {
                callback(data);
                $("#modalpopup").hide();
                if (data.status == 1) {

                } else {
                    var errors = [];

                    if (Object.prototype.hasOwnProperty.call(data, 'data')) {
                        var edata = data.data;
                        if (Object.prototype.hasOwnProperty.call(edata, 'errors')) {
                            errors = data.data.errors;
                        }
                    }
                    if (errors && errors.length) {
                        for (i = 0; i < errors.length; i++) {
                            var path = errors[i]['path'];
                            var message = errors[i]['message'];
                            $('.div' + path).addClass('has-error');
                            $('.div' + path).append('<div class="help-block">' + message + '</div>');
                            toastr.error(message, "Error!");
                        }
                    } else {
                        toastr.error(data, "Error!");
                    }
                }
            },
            error: function (x, e) {
                if (x.status == 0) {
                    toastr.error("You are offline!!\n Please Check Your Network.", "Error!");
                } else if (x.status == 404) {
                    toastr.error("Requested URL not found.", "Error " + x.status);
                } else if (x.status == 500) {
                    var res = x.responseText;
                    var path = 'documents';
                    $('.div' + path).addClass('has-error');
                    $('.div' + path).append('<div class="help-block">' + $(res).first().text() + '</div>');
                    toastr.error("" + $(res).first().text(), "Error Image");
                    setTimeout(function () {
                        location.href = '';
                    }, 2000);
                } else if (e == "parsererror") {
                    toastr.error("Error.\nParsing JSON Request failed.", "Error!");
                } else if (e == "timeout") {
                    toastr.error("Request Time out.", "Error!");
                } else {
                    toastr.error("Unknow Error.\n" + x.responseText, "Error!");
                }
            }
        }


        form.onsubmit = function (ev, data) {
            ev.preventDefault();
            $(".help-block").remove();
            $(".has-error").removeClass("");

            //for checkbox value 1 or 0
            var this_master = $(form);
            this_master.find('input[type="checkbox"]').each(function () {
                var checkbox_this = $(this);

                if (checkbox_this.is(":checked") == true) {
                    checkbox_this.attr('value', '1');
                } else {
                    checkbox_this.prop('checked', true);
                    checkbox_this.attr('value', '0');
                    setTimeout(function () {
                        checkbox_this.prop('checked', false);
                    }, 2000);
                }
            })

            if (elmFiles) {
                if (elmFiles instanceof Array) {
                    for (var i = 0; i < elmFiles.length; i++) {
                        $("#" + elmFiles[i]).remove();
                    }
                } else {
                    $("#" + elmFiles).remove();
                }
                var formData = new FormData($('#' + element)[0]);
                ajaxSetting.processData = false;
                ajaxSetting.contentType = false;

            } else {
                var formData = $(this).serialize();
            }

            ajaxSetting.data = formData;
            $.ajax(ajaxSetting);
        }
    }
}


var fileImage = document.getElementById("images_select"),
    fileElem = document.getElementById("images");

if (fileImage) {
    fileImage.addEventListener("click", function (e) {
        if (fileElem) {
            fileElem.click();
        }
        e.preventDefault(); // prevent navigation to "#"
    }, false);
}

function regularCallback(data) {
    if (data.status == 1) {
        toastr.success('Successfully Saved!');
        location.href = "/car/view/" + data.data.uid;
    }
}
var counter = 0;

function handleFiles(thisFiles, multiple, elmFilelist, elmJsonImages) {
    multiple = multiple || false;
    elmJsonImages = elmJsonImages || "";
    var files = thisFiles.files;

    //store single/multiple files
    var newFiles = [];
    //store to div  file list
    var fileList = document.getElementById(elmFilelist);

    var photos = [];

    counter++;

    //get existing images
    if (elmJsonImages != "") {
        var photos = JSON.parse($("#" + elmJsonImages).val());
    }

    if (multiple) {
        for (var i = 0; i < files.length; i++) {
            var limit = 1 * 1000 * 1000;
            if (files[i].size > limit) {
                toastr.error("Ukuran file melebihi 1MB", "Error!");
            } else {
                newFiles.push(files[i]);
            }
        }
    } else {
        //single file
        newFiles = files[0];
    }

    if (multiple) {
        var getId = thisFiles.getAttribute("id");
        var elmnt = document.getElementById(getId);
        if (elmnt) {
            var cln = elmnt.cloneNode(true);
            cln.setAttribute("id", getId + counter);
            fileList.appendChild(cln);
        }
    }

    newFiles.forEach(function (file) {
        if (elmJsonImages != "") {
            photos.push(file.name);
        }

        var media = document.createElement("div");
        media.classList.add("media");
        fileList.appendChild(media);

        var mediaLeft = document.createElement("div");
        mediaLeft.classList.add("media-left");
        media.appendChild(mediaLeft);


        var img = document.createElement("img");
        img.src = window.URL.createObjectURL(file);
        img.width = 100;
        img.classList.add("media-object");
        img.classList.add("boxy");
        img.onload = function () {
            window.URL.revokeObjectURL(this.src);
        }
        mediaLeft.appendChild(img);

        var mediaBody = document.createElement("div");
        mediaBody.classList.add("media-body");
        media.appendChild(mediaBody);

        var row = document.createElement("div");
        row.classList.add("row");
        mediaBody.appendChild(row);

        var col8 = document.createElement("div");
        col8.classList.add("col-md-8");
        var text = '<h5>' + file.name + '</h5><p> Sizes : ' + (file.size / 1024).toFixed(1) + ' KB </p>';
        col8.innerHTML = text;
        row.appendChild(col8);

        var col4 = document.createElement("div");
        col4.classList.add("col-md-4");
        var fileElement = document.createElement("button");
        fileElement.classList.add("btn");
        fileElement.classList.add("btn-danger");
        fileElement.setAttribute("type", "button");

        var trash = document.createElement("I");
        trash.classList.add("fa");
        trash.classList.add("fa-trash");
        fileElement.appendChild(trash);
        media.setAttribute("fileData", file);
        media.setAttribute("filename", file.name);

        fileElement.addEventListener('click', function (event) {
            let fileElement = event.target;

            if (elmJsonImages != "") {
                let indexToRemove = newFiles.indexOf(media.getAttribute('fileData'));
                newFiles.splice(indexToRemove, 1);
                let jsonToRemove = photos.indexOf(media.getAttribute('filename'));
                photos.splice(jsonToRemove, 1);
                $("#" + elmJsonImages).val(JSON.stringify(photos));
            }

            media.remove();

        }, false);

        col4.appendChild(fileElement);
        row.appendChild(col4);
    });
    if (elmJsonImages != "") {
        //store the array of file in our element this is send to other page by form submit
        $("#" + elmJsonImages).val(JSON.stringify(photos));
    }
}