      <div class="modal fade" id="edit-zoneleader<?= htmlentities($user_session); ?>">
          <div class="modal-dialog modal-sm">
              <div class="modal-content">
                  <div class="modal-header">
                      <h4 class="modal-title">Manage Zone Leader</h4>
                      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                      </button>
                  </div>
                  <div class="modal-body">
                    <div id="msg-zoneedit"></div>
                    <form method="POST">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label>Username:</label>
                                    <input class="form-control input-sm" type="text" id="edit_username2" alt="username3" autocomplete="off" />
                                    <label id="msg-username3" style="color:#CC0000;" ></label>
                                </div>
                                <div class="form-group">
                                    <label>Password:</label>
                                    <input class="form-control input-sm" type="password" id="edit_password2" alt="password3"  autocomplete="off" />
                                </div>

                            </div>
                        </div>
                  </div>
                  <div class="modal-footer justify-content-between">
                     <input type="hidden" id="edit_userid2">
                      <input type="hidden" alt="user" id="user" value="<?= htmlentities($user_session); ?>">
                      <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                      <button type="button" class="btn btn-primary" id="edit-zonelead">Update</button>
                  </div>
                  </form>
              </div>
          </div>
      </div>
      <script>
          document.addEventListener('DOMContentLoaded', () => {
              let btn = document.querySelector('#edit-zonelead');
              btn.addEventListener('click', () => {

                  const username = document.querySelector('input[id=edit_username2]').value;
                  const password = document.querySelector('input[id=edit_password2]').value;
                  const user_id = document.querySelector('input[id=edit_userid2]').value;
                  const user = document.querySelector('input[alt=user]').value;

                  var data = new FormData(this.form);

                  data.append('username', username);
                  data.append('password', password);
                  data.append('user_id', user_id);
                  data.append('user', user);


                      $.ajax({
                          url: '../../controllers/edit_zoneleader.php',
                          type: "POST",
                          data: data,
                          processData: false,
                          contentType: false,

                          async: false,
                          cache: false,

                          success: function(data) {
                              $('#msg-zoneedit').html(data);

                          },
                          error: function(data) {
                              console.log("Failed");
                          }
                      });
                 // }

              });
          });
      </script>

      <script type="text/javascript">
    $(document).ready(function() {
 
        var timeOut = null; // this used for hold few seconds to made ajax request
 
        var loading_html = '<img src="../../images/ajax-loader.gif" style="height: 20px; width: 20px;"/>'; // just an loading image or we can put any texts here
 
        //when button is clicked
        $('#edit_username2').keyup(function(e){
 
            // when press the following key we need not to make any ajax request, you can customize it with your own way
            switch(e.keyCode)
            {
                //case 8:   //backspace
                case 9:     //tab
                case 13:    //enter
                case 16:    //shift
                case 17:    //ctrl
                case 18:    //alt
                case 19:    //pause/break
                case 20:    //caps lock
                case 27:    //escape
                case 33:    //page up
                case 34:    //page down
                case 35:    //end
                case 36:    //home
                case 37:    //left arrow
                case 38:    //up arrow
                case 39:    //right arrow
                case 40:    //down arrow
                case 45:    //insert
                //case 46:  //delete
                    return;
            }
            if (timeOut != null)
                clearTimeout(timeOut);
            timeOut = setTimeout(is_available, 500);  // delay delay ajax request for 1000 milliseconds
            $('#msg-username3').html(loading_html); // adding the loading text or image
        });
  });
function is_available(){
    //get the username
    var username = $('#edit_username2').val();
 
    //make the ajax request to check is username available or not
    $.post("check_usernamezoneleader.php", { username: username },
    function(result)
    {
        console.log(result);
        if(result != 0)
        {
            $('#msg-username3').html('Not Available');
            document.getElementById("edit-zonelead").disabled = true;
        }
        else
        {
            $('#msg-username3').html('<span style="color:#006600;">Available</span>');
            document.getElementById("edit-zonelead").disabled = false;
        }
    });
 
}
</script>
