Mini Shell

<?php
include("config.php");
$conn = dbconnect();

$id = $_GET['id'];

$today = date('Y-m-d');
?>
<h3>Update</h3>
<?php
$content_query = "SELECT * FROM tb1_director WHERE id = '$id'";
$content_res = mysqli_query($conn, $content_query);
$content_row = mysqli_fetch_object($content_res);
$slider_id = $content_row->id;
$name = $content_row->name;
$position = $content_row->position;
$status = $content_row->status;
$slider_img = $content_row->slider_img;
?>
<form class="edit-form" id="editForm" enctype="multipart/form-data">
    <div class="col-md-12">
        <div class="card-block">
            <input type="hidden" name="type" value="update">
            <input type="hidden" name="slider_id" value="<?php echo $slider_id ?>">

            <div class="form-group row">
                <label class="col-md-3 col-form-label">Change Image</label>
                <div class="col-md-9">
                    <input type="file" name="files" id="filer_input_single">
                </div>
                <label class="col-md-3 col-form-label"> Name</label>
                <div class="col-md-9">
                    <input type="text" class="form-control" id="name" name="name" value="<?php echo $name ?>">
                </div>
                <label class="col-md-3 col-form-label mt-3">Position</label>
                <div class="col-md-9">
                    <input type="text" class="form-control mt-3" id="position" name="position" value="<?php echo $position ?>">
                </div>
            </div>

        </div>
    </div>
    <div class="col-md-12 text-center">
        <button type="submit" class="btn btn-success text-bold" id="sub-btn" style="width: -webkit-fill-available;">Submit</button>
    </div>
</form>
<!-- jquery file upload js -->
<script src="assets/pages/jquery.filer/js/jquery.filer.min.js"></script>
<script src="assets/pages/filer/custom-filer.js" type="text/javascript"></script>
<script src="assets/pages/filer/jquery.fileuploads.init.js" type="text/javascript"></script>
<script src="assets/validation/jquery-validation/jquery.validate.min.js"></script>
<script src="assets/css/validation/form-validation.js"></script>
<script type="text/javascript">
    // initialize validate plugin on the form
    $("#editForm").validate({
        errorPlacement: function(error, element) {
            var ele = $(element),
                err = $(error),
                msg = err.text();
            if (msg != null && msg !== "") {
                ele.tooltipster('content', msg);
                ele.tooltipster('open'); //open only if the error message is not blank. By default jquery-validate will return a label with no actual text in it so we have to check the innerHTML.
            }
        },
        unhighlight: function(element, errorClass, validClass) {
            $(element).removeClass(errorClass).addClass(validClass).tooltipster('close');
        },

        submitHandler: function(form) { // for demo
            var form = $('#editForm')[0];
            var formData = new FormData(form);
            event.preventDefault();
            $("#sub-btn").attr("disabled", true);
            var isvalid = true;
            if ($('#name').val() == '') {
                $('#name').addClass('is-invalid');
                isvalid = false
            }
            if ($('#position').val() == '') {
                $('#position').addClass('is-invalid');
                isvalid = false
            }
            const file = $('#filer_input_single')[0].files[0];

            if (file) {
                if (file.size > 500 * 1024) {
                    isvalid = false;
                    swal({
                        title: 'File too large!',
                        text: "Please upload an image under 500 KB.",
                        icon: 'warning',
                        buttons: {
                            confirm: {
                                text: 'Okay',
                                value: true,
                                visible: true,
                                className: 'btn btn-primary',
                                closeModal: true
                            }
                        },
                        closeOnEsc: false,
                        closeOnClickOutside: false
                    });
                }
            }
            if (isvalid) {
                $.ajax({
                    type: 'POST',
                    url: 'ajax/director_action',
                    processData: false,
                    contentType: false,
                    dataType: "json",
                    data: formData,
                    success: function(data) {
                        if (data == 'done') {
                            swal({
                                title: 'Updated Successfully!',
                                text: "Directors has been successfully Updated",
                                icon: 'success',
                                confirmButtonColor: '#3f51b5',
                                closeOnEsc: false,
                                closeOnClickOutside: false,
                                buttons: {
                                    confirm: {
                                        text: "Okay",
                                        value: true,
                                        visible: true,
                                        className: "btn btn-primary",
                                        closeModal: true
                                    }
                                }
                            }).then((value) => {
                                if (value == true) {
                                    location.reload();
                                }
                            });
                        }
                    },
                    error: function(data) {
                        swal({
                            title: 'Internal Sever Error!',
                            text: "Try again",
                            icon: 'warning',
                            closeOnEsc: false,
                            closeOnClickOutside: false,
                        })
                    },
                });
            }
        }
    });
</script>