      <div class="modal fade" id="disapprove-Modal<?= htmlentities($user_session); ?>">
          <div class="modal-dialog modal-sm">
              <div class="modal-content">
                  <div class="modal-header">
                      <h4 class="modal-title">Disapprove SAP Form</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-disapprove"></div>  
                <form method="POST">
                  <p>Are you sure you want to disapproved this SAP Form? If yes, put the findings</p>
                  <div class="form-group">
                  <label>Reason:</label>
                  <input type="text" id="purpose" alt="purpose" class="form-control">
                </div>
                  </div>
                  <div class="modal-footer justify-content-between">
                       <input type="hidden" alt="recordedBy" id="recordedBy2" value="<?= htmlentities($user_session); ?>">
                       <input type="hidden" alt="sapform_id" id="edit2_sapformid" >
                       <input type="hidden" alt="edit_fullname" id="edit2_fullname" >
                      <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                      <button type="button" class="btn btn-primary" id="edit-disapprove">Disapprove</button>
                  </div>
                  </form>
              </div>
          </div>
      </div>
            <script>
          document.addEventListener('DOMContentLoaded', () => {
              let btn = document.querySelector('#edit-disapprove');
              btn.addEventListener('click', () => {


                 const purpose = document.querySelector('input[id=purpose]').value;
                 const recordedBy = document.querySelector('input[id=recordedBy2]').value;
                 const full_name = document.querySelector('input[id=edit2_fullname]').value;
                 const sapform_id = document.querySelector('input[id=edit2_sapformid]').value;


                  var data = new FormData(this.form);

                  data.append('purpose', purpose);
                  data.append('recordedBy', recordedBy);
                  data.append('full_name', full_name);
                  data.append('sapform_id', sapform_id);
       

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

                          async: false,
                          cache: false,

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

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

              });
          });
      </script>
