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

WordPress REST API Tutorial (Real Example)

 WordPress comes with a built-in (as in no plugins required) REST API. In this lesson we learn how to load and save content to/from the WordPress database on the fly using AJAX and the brand new REST API.

This is work only for admin login users.

1 : Open theme's functions.php file and paste these code.

//new code

    wp_enqueue_script( 'main_js', get_template_directory_uri() . '/rest/js/newcustom.js', NULL, '1.1', true );

    wp_localize_script('main_js', 'magicalData', array( 'nonce' => wp_create_nonce('wp_rest') )); 

2 : Create page-restapi.php in theme template path. put this code.

get_header(); ?>

    <div id="primary-mono" class="content-area col-md-12 page">

        <main id="main" class="site-main" role="main">

            <?php //if (current_user_can('administrator')) : ?>

            <div class="admin-quick-add">

                <h3>Quick Add Post</h3>

                <input type="text" name="title" placeholder="Title">

                <textarea name="content" placeholder="Content"></textarea>

                <button id="quick-add-button">Create Post</button>

            </div>

            <?php //endif; ?>

            <?php while ( have_posts() ) : the_post();?>

                <?php get_template_part( 'modules/content/content', 'page' ); ?>

                <?php

                // If comments are open or we have at least one comment, load up the comment template

                if ( comments_open() || get_comments_number() ) :

                    comments_template();

                endif;

                ?>

            <?php endwhile; // end of the loop. ?>

            <button  id="load-post-btn">Load Post</button>

            <div id="load_post_container"> </div>

        </main><!-- #main -->

    </div><!-- #primary -->

<?php get_footer(); ?>

3 : Create new js file in this theme path:/rest/js/newcustom.js

let load_post_btn = document.getElementById('load-post-btn');

var postcontainer = document.getElementById('load_post_container');

if (load_post_btn) {

load_post_btn.addEventListener("click", function(){

//console.log("clicked");

var ourRequest = new XMLHttpRequest();

// http://localhost/wordpress611/?rest_route=/wp/v2/posts

// http://localhost/wordpress611/wp-json/wp/v2/posts?categories=6&order=asc

ourRequest.open('GET', 'http://localhost/wordpress611/?rest_route=/wp/v2/posts');

ourRequest.onload = function() {

  if (ourRequest.status >= 200 && ourRequest.status < 400) {

    var data = JSON.parse(ourRequest.responseText);

    //console.log(data);

    createHTML(data)

  } else {

    console.log("We connected to the server, but it returned an error.");

  }

};

ourRequest.onerror = function() {

  console.log("Connection error");

};

ourRequest.send();

});

}

function createHTML(postsData) {

  var ourHTMLString = '';

  for (i = 0; i < postsData.length; i++) {

    ourHTMLString += '<h2>' + postsData[i].title.rendered + '</h2>';

    ourHTMLString += postsData[i].content.rendered;

  }

  postcontainer.innerHTML = ourHTMLString;

}

// Quick Add Post AJAX

var quickAddButton = document.querySelector("#quick-add-button");

if (quickAddButton) {

  quickAddButton.addEventListener("click", function() {

    var ourPostData = {

      "title": document.querySelector('.admin-quick-add [name="title"]').value,

      "content": document.querySelector('.admin-quick-add [name="content"]').value,

      "status": "publish"

    }

    var createPost = new XMLHttpRequest();

    var posturl = 'http://localhost/wordpress611/?rest_route=/wp/v2/posts';

    //createPost.open("POST", magicalData.siteURL + "/wp-json/wp/v2/posts");

    createPost.open("POST", posturl);

    createPost.setRequestHeader("X-WP-Nonce", magicalData.nonce);

    createPost.setRequestHeader("Content-Type", "application/json;charset=UTF-8");

    createPost.send(JSON.stringify(ourPostData));

    createPost.onreadystatechange = function() {

      if (createPost.readyState == 4) {

        if (createPost.status == 201) {

          document.querySelector('.admin-quick-add [name="title"]').value = '';

          document.querySelector('.admin-quick-add [name="content"]').value = '';

        } else {

          alert("Error - try again.");

        }

      }

    }

  });

}

4: add css:-

/* Quick Add Form Styles */

.admin-quick-add {

background-color: #DDD;

padding: 15px;

margin-bottom: 15px;

}

.admin-quick-add input,

.admin-quick-add textarea {

width: 100%;

border: none;

padding: 10px;

margin: 0 0 10px 0;

box-sizing: border-box;

}