BBnepal-Accounts/application/views/admin/add-edit-course.php

<link rel="stylesheet" href="<?php echo base_url(); ?>assets_admin/css/bootstrap-select.css"> 
    <div class="wraper responsive-width">  
        <main class="" id="main">
            <div class="from-group">
                <a href="<?= base_url(); ?>admin/course"><button type="button" class="btn btn-success btn-sm btn-dark">Back</button></a>
            </div>
            <!----admin template section---->
            <div class="admin_tempblock">
                <div class="admin_tempsec">
                    <div class="admin_sec">
                        <div class="subsec_sec">
                            <div class="subject_l">
                                <div class="subject_lsec">
                                    <div class="subject_lhead"><?php if($cid==0){ echo 'Add Course'; }else{ echo 'Update Course'; } ?></div>
                                    <?php 
                                    $name = ''; $subjects=''; $cfee=''; $afee='';
                                    if(isset($detail)){
                                    $name = $detail['course_name'];
                                    $subjects = $detail['subject_id'];
                                    $sub = explode(',', $subjects);
                                    $cfee = $detail['course_fee'];
                                    $afee = $detail['application_fee'];
                                }
                                ?>
                                <form id="coursefrom" method="post">
                                    <input type="hidden" name="cid" id="cid" value="<?= $cid; ?>"> 
                                    <div class="subject_lformarea">
                                        <div class="form-group">
                                            <label for="">Course Name*</label>
                                            <input type="text" name="cname" id="cname" class="form-control" value="<?= $name; ?>" placeholder="Enter course name">
                                            <p id="cname_error" style="color:red;"></p><p id="exists_error" style="color:red;"></p>
                                        </div>

                                        <div class="form-group assign_subject">
                                            <label>Assign Subject*</label>
                                            <select name="csubject[]" id="csubject" class="selectpicker" multiple data-live-search="true">
                                                <?php foreach($subject_list as $subject) { ?>
                                                <option  value="<?= $subject['id']; ?>"><?= $subject['subject_name']; ?></option>
                                                <?php } ?> 
                                            </select>
                                            <p id="csubject_error" style="color:red;"></p>
                                        </div>
                                        <div class="form-group">
                                            <label for="">Course Fee*</label>
                                            <input type="text" name="cfee" id="cfee" class="form-control" value="<?= $cfee; ?>" placeholder="Enter course fee">
                                            <p id="cfee_error" style="color:red;"></p>
                                        </div>
                                        <div class="form-group">
                                            <label for="">Application Fee*</label>
                                            <input type="text" name="afee" id="afee" class="form-control" value="<?= $afee; ?>" placeholder="Enter application fee">
                                            <p id="afee_error" style="color:red;"></p>
                                            <p id="success" style="color:green;"></p>
                                        </div>
                                        <button type="button" class="subject_addbtn" onclick="validate_course_form();"><?php if($cid==0){ echo 'Add'; }else{ echo 'Update'; } ?></button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!----admin template section end---->
    </main>
    <!--End right-top side--> 
    <div class="viewDoc delete-modal-wrap">
    <div class="modal fade" id="SuccessModal" role="dialog">
        <div class="modal-dialog"> 
            <div class="modal-content"> 
                <button type="button" class="close" data-dismiss="modal">&times;</button>  
                <div class="delete-modal">
                   
                    <h4>Course added successfully.</h4>
                   
                    <div class="delete-modal-btn">
                        <button type="button" class="subject_addbtn subject_addbtn_cancel" data-dismiss="modal">Ok</button>
                    </div>
                </div>   
            </div>
        </div>
    </div>
</div>
</div> 
<!-- <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script> -->
<script defer src="<?php echo base_url(); ?>assets_admin/js/bootstrap-select.min.js"></script>
<script>
    $(document).ready(function(){

//multiple select js start
$('select').selectpicker();
//multiple select js end
});
</script>
<script type="text/javascript">
    function hide_all_course_error(){
        $('#cname_error').hide();
        $('#csubject_error').hide();
        $('#cfee_error').hide();
        $('#afee_error').hide();
        $('#success').html('');
    }

    function cleanup_course_val(){
        $('#cname').val('');
        $('#csubject').val('');
        $('#cfee').val('');
        $('#afee').val('');
        $('#exists_error').html('');
    }

    function validate_course_form()
    {
        hide_all_course_error();

        var errArr = new Array();   

        var cname = $('#cname').val().trim();
        var regex = /^([a-zA-Z0-9\s]{3,})+$/;
        if(cname==''){
            errArr.push('cname_Sep@Str_Please enter course.');
        }else if(!regex.test(cname)){
            errArr.push('cname_Sep@Str_Please enter only alphabets and must be min 3 characters.');
        }

        var csubject = $('#csubject').val();
        if(csubject==''){
            errArr.push('csubject_Sep@Str_Please select subject.');
        }

        var cfee = $('#cfee').val().trim();
        var regexno = /^[0-9]+(\.[0-9]{2})?$/;
        if(cfee==''){
            errArr.push('cfee_Sep@Str_Please enter course fee.');
        }else if(!regexno.test(cfee)){
            errArr.push('cfee_Sep@Str_Accepts only number.');
        }

        var afee = $('#afee').val().trim();
        var regexno = /^[0-9]+(\.[0-9]{2})?$/;
        if(afee==''){
            errArr.push('afee_Sep@Str_Please enter application fee.');
        }else if(!regexno.test(afee)){
            errArr.push('afee_Sep@Str_Accepts only number.');
        }

        if(errArr.length>0)
        {
            for(i=0; i<errArr.length; i++)
            {
                var resArr = errArr[i].split("_Sep@Str_");
                $("#"+resArr[0]+"_error").html(resArr[1]);;
                $("#"+resArr[0]+"_error").show();
            }       
            var xxxVal = errArr[0].split('_Sep@Str_');          
            $('#'+xxxVal[0]).focus();       
            return false;
        }
        else{
            $('#coursefrom').submit();
        }
    }

    $('#coursefrom').submit(function(e){
        e.preventDefault();
        var formData = new FormData(this);
        $.ajax({
            type : 'POST',
            url : "<?php echo base_url(); ?>Admin/addedit_course",
            data : formData,
            success:function(resposne){
                if(resposne == '1'){
                    cleanup_course_val();
                   // $('#success').html('Course added successfully.');
                   $('#SuccessModal').modal('show');
                }else if(resposne == '2'){
                    $('#success').html('Course updated successfully.');
                }else if(resposne == '0'){
                    $('#success').html('');
                    $('#exists_error').html('Course already exists.');
                }
            },
            contentType : false,
            processData : false,
        });
    });
</script>