Select and Insert value from dropdown multiple, write and insert multiple values

 Hello. 

Today I want to show you how to select values from dropdown, Write or insert values from dropdown and save to database and manage it.

DB table name : maternal_disease

fields: mdid, cid, shortname, status, display, createdby, createdate, updatedby, updatedate

main php file code : 

<div class="col-sm-4">
                                        <input type="hidden" name="jobskillarray" id="jobskillarray" value="">
                                        <p id="jobskillmsg"></p>
                                        <div id="servicesList2" class="servicesList2"> </div>
                                        <input type="text" name="tag_name2" id="tag_name2" placeholder="Required Skills" list="skilllist2">
                                         
                                        <button type="button" class="btn btn-primary" id="addSkillBtn2">Add This Disease</button>
                                        <datalist id="skilllist2">
                                          <?php foreach ($maternalDiseaseList as $tag) { ?>
                                               <option ><?php echo $tag['shortname'] ?></option>
                                          <?php } ?>
                                        </datalist>
                                        
                                    </div>
<script type="text/javascript">
        $(document).ready(function() {
        var quotations = [];
        var quotations_id = [];
        $('#addSkillBtn2').click(function(e) {
          //debugger;
          var len = quotations_id.length;
          $("#jobskillmsg").html('');
          if (len < 15)
          {
              let tag_name2 = $('#tag_name2').val();
              let tagname2 = tag_name2.slice(0, 100);
              $("#skillMsg").html('');
              console.log(quotations);
              //console.log(quotations_id);
              //debugger
              var data = {};
              if ( tagname2.length >= 2 ){
                //if ($.inArray(tagname2, quotations) == 0) { 
                if ($.inArray(tagname2, quotations) >= 0) { 
                    console.log(quotations);
                } 
                else {
                  //console.log(quotations);
                  //console.log(quotations_id);
                  //debugger;
                  $.ajax({
                        url: 'ajax.php',
                        type: 'POST',
                        dataType: 'json',
                        data: {set_maternal_disease: tagname2},
                        //processData: false,
                        //contentType: false,
                        beforeSend: function(){
                              $('#mydiv').show();
                            },
                        success: function(response) {
                          $('#mydiv').hide();
                          //console.log(quotations);
                          //console.log(quotations_id);
                          //debugger;
                            if (response.message == 'success') {
                               var itemname = response.data.name;
                                var itemid = response.data.id;
                                    //console.log('Value Not exists');
                                    quotations.push(itemname);
                                    quotations_id.push(itemid);
                                    var item = document.createElement("p");
                                    var skillli = '<span class="skillable" data-value="'+response.data.id+'" data-name="'+response.data.name+'" id="js_'+response.data.id+'" ><label for="">'+response.data.name+'</label><i title="delete this skill" id="icon-minus2" class="red right icon-minus-sign"> x </i></span>';
                                    item.innerHTML = skillli;
                                    document.getElementsByClassName("servicesList2")[0].append(item);
                                    $('#tag_name2').val('');
                                  //console.log(quotations);console.log(quotations_id);
                                  $('#jobskillarray').val(quotations_id);
                               
                            } else if (response.message == 'duplicate') {
                              // setTimeout(function() {
                              //     $("#skillMsgDuplicate").hide('blind', {}, 500)
                              // }, 5000);
                               $("#skillMsg").html("<div class='col-md-12'><div class='alert alert-warning'><strong>Sorry! </strong> Duplicate skill cannot be added. </div> </div>");
                            } else if (response.message == 'limit') {
                              // setTimeout(function() {
                              //     $("#skillMsgLimit").hide('blind', {}, 500)
                              // }, 5000);
                              $("#skillMsg").html("<div class='col-md-12'><div class='alert alert-danger'><strong>Sorry! </strong> Maximum 5 skills are allowed. </div> </div>");
                            } else {
                              alert('Error! Try again or refresh page.');
                            }
                        },
                        error: function() {
                          $('#mydiv').hide();
                            alert('Error occurred while adding the skill.');
                        }
                  });
                  return false; 
                  } //end if check value exist
              }
          } 
          else
          { 
            $("#jobskillmsg").html("<div class='col-md-12'><div class='alert alert-danger'><strong>Sorry! </strong> Maximum 15 Disease are allowed. </div> </div>");
          }
          console.log(quotations);
          console.log(quotations_id);
        });
        //end skill to post ajax
        //remove jobpost skill by modal
        $(document).on('click','#icon-minus2',
        function() 
        {
          var y = quotations_id;
          //if (confirm("Are you sure?")) {
            var $list =  $("#servicesList");
            listValue = $(this).parent().data('value');
            listName = $(this).parent().data('name');
            //alert(listValue);
            if (listValue !== '') {
              $("p span#js_"+listValue).remove();
              quotations_id = jQuery.grep(quotations_id, function(value) {
                        return value != listValue;
                      });
              $('#jobskillarray').val(quotations_id);
              quotations = jQuery.grep(quotations, function(value) {
                        return value != listName;
                      });
              //console.log(quotations_id);
              //console.log(quotations);
            }
              
          //}         
        });
        //end
        });
    </script>

ajax.php

//display maternal disease
if(isset($_POST['set_maternal_disease'])){
    $id_edit = string_sanitize(trim($_POST['set_maternal_disease']));
    
    $userid = $_SESSION['userid'];
    $cid = $_SESSION['cid'];
    $createddate = date("Y-m-d H:i:s");
    $disease = mb_substr($id_edit, 0, 100);
    $sql = "SELECT shortname, mdid FROM `maternal_disease` WHERE `shortname` = '".$disease."' AND `cid` = '".$cid."' AND `status` = '1' AND `display` = '1' ";
    $myquery = mysqli_query($db_conx, $sql);
    if(mysqli_num_rows($myquery) == 1)
    {
        $row = mysqli_fetch_assoc($myquery);
        $mdid = $row['mdid'];
        $shortname = $row['shortname'];
    } elseif (mysqli_num_rows($myquery) == 0) {
        //insert data
        $sql = "INSERT INTO `maternal_disease` (`cid`, `shortname`, `createdby`, `createddate`) VALUES ('".$cid."', '".$disease."', '".$userid."', '".$createddate."')";
        $insertDisease = mysqli_query($db_conx, $sql);
        if ($insertDisease === TRUE){
            $mdid = mysqli_insert_id($db_conx);
            $shortname = $disease;
        }
    } else {
    }
    $responseData = [
                    'message' => 'success',
                    'data' => ['name'=> $shortname, 
                                'id' => $mdid
                                ],
                ];
    echo json_encode($responseData);
}