      <div class="modal fade" id="add-household<?= htmlentities($user_session); ?>">
          <div class="modal-dialog modal-sm">
              <div class="modal-content">
                  <div class="modal-header">
                      <h4 class="modal-title">Manage Household</h4>
                      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                      </button>
                  </div>
                  <div class="modal-body">
                      <form method="POST">
                          <div id="msg-addhousehold"></div>
                          <div class="form-group">
                              <label>HouseHold#:</label>
                              <input type="text" class="form-control" id="household_no" alt="household_no" autocomplete="off" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');" >
                               <label id="msg-householdno" style="color:#CC0000;" ></label>

                          </div>
                          <div class="form-group">
                              <label>Purok#:</label>
                                <select type="text" class="form-control" id="purok_no" alt="purok_no" autocomplete="off">
                                    <option selected disabled value="">&larr; Select Purok No. &rarr;</option>
                                    <option value="1">1</option>
                                    <option value="2">2</option>
                                    <option value="3">3</option>
                                    <option value="4">4</option>
                                </select>
                          </div>
                          <div class="form-group">
                              <label>Total Members of the Family:</label>
                              <input type="text" class="form-control" id="total_membersofthefamily" alt="total_membersofthefamily" autocomplete="off" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');" >
                          </div>
                  </div>
                  <div class="modal-footer justify-content-between">
                      <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-success" id="add">Add</button>
                  </div>
                  </form>
              </div>
          </div>
      </div>
      <script>
          document.addEventListener('DOMContentLoaded', () => {
              let btn = document.querySelector('#add');
              btn.addEventListener('click', () => {

                  const household_no = document.querySelector('input[alt=household_no]').value;
                  const purok_no = $('#purok_no option:selected').val();
                  const total_membersofthefamily = document.querySelector('input[alt=total_membersofthefamily]').value;
                  const user = document.querySelector('input[alt=user]').value;

                  var data = new FormData(this.form);

                  data.append('household_no', household_no);
                  data.append('purok_no', purok_no);
                  data.append('total_membersofthefamily', total_membersofthefamily);
                  data.append('user', user);

                  if (household_no == '' || purok_no == '' || household_no == 'total_membersofthefamily') {
                      $('#msg-addhousehold').html("<div class='alert alert-danger'><i class='fa fa-info'></i> Please input required field!</div>");
                  } else {
                      $.ajax({
                          url: '../../controllers/add_household.php',
                          type: "POST",
                          data: data,
                          processData: false,
                          contentType: false,

                          async: false,
                          cache: false,

                          success: function(data) {
                              $('#msg-addhousehold').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
        $('#household_no').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-username').html(loading_html); // adding the loading text or image
        });
  });
function is_available(){
    //get the username
    var household_no = $('#household_no').val();
 
    //make the ajax request to check is username available or not
    $.post("check_householdno.php", { household_no: household_no },
    function(result)
    {
        console.log(result);
        if(result != 0)
        {
            $('#msg-householdno').html('Household No. already exists');
            document.getElementById("add").disabled = true;
        }
        else
        {
            $('#msg-householdno').html('<span style="color:#006600;">Available</span>');
            document.getElementById("add").disabled = false;
        }
    });
 
}
</script>