将 php id 传递给确认模式框

Question

I'm trying to pass an php value to a confirmation modal box.

I tried some jquery i found but i didn't get how it work to pass my id to my modal box.

Here is the button when i click, it will show a confirmation modal box.

<a class="dropdown-item" data-bs-toggle="modal" data-bs-target="#confirmation" data-id="<?=$val['id']?>"><i class="bx bx-trash me-1"></i> Move To Trashcan</a>

and this is the modal i'm trying to pass the value.

<div class="modal fade" id="confirmation" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel2">Confirmation</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col mb-3">
            Are you sure want to delete this?
          </div>
          <p id="debug-url"></p>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">No</button>
        <button type="button" class="btn btn-primary btn-ok" onclick="window.location='http://localhost/NguyenTranTienHiep1/index.php/backend/delTempCat/'">Yes</button>
      </div>
    </div>
  </div>
</div>

Here is the php which contain the button "Move to trashcan"

    <?php
                              if ($data['category'] == NULL)
                                  echo "<td colspan='5' class='nothing'>THERE IS NOTHING TO SEE IN HERE!</td>";
                            else
                              foreach($data['category'] as $val): ?>
                              <tr>
                                  <td><i class="fab fa-angular fa-lg text-danger me-3"></i>
                                      <strong><?=$val['id']?></strong>
                                  </td>
                                  <td><?=$val['category_name']?></td>
                                  <td>
                                      <?php
                                      if($val['parent']==0)
                                      {
                                        echo "<i style='color:#7d8b9b;'>NULL</i>";
                                      }
                                      foreach($data['allCat'] as $val1)
                                      {
                                        if($val['parent'] == $val1['id'])
                                        {
                                          echo $val1['category_name'];
                                        }
                                      }
                                    ?>
                                  </td>
                                  <td>

                                      <?php
                                  if ($val['status'] == 1)
                                      echo "<a href='".LINK."/backend/statusCat/".$val['id']."/0/'><span class='badge bg-label-primary me-1'>Active</span></a>";
                                  else
                                      echo "<a href='".LINK."/backend/statusCat/".$val['id']."/1/'><span class='badge bg-label-warning me-1'>Inactive</span></a>";
                                    ?>
                                  </td>
                                  <td>
                                      <div class="dropdown">
                                          <button type="button" class="btn p-0 dropdown-toggle hide-arrow"
                                              data-bs-toggle="dropdown">
                                              <i class="bx bx-dots-vertical-rounded"></i>
                                          </button>
                                          <div class="dropdown-menu">
                                              <a class="dropdown-item"
                                                  href="<?=LINK?>/backend/editCat/<?=$val['id']?>"><i
                                                      class="bx bx-edit-alt me-1"></i> Edit</a>
                                              <a class="dropdown-item"
                                                  href="<?=LINK?>/backend/delTempCat/<?=$val['id']?>"><i
                                                      class="bx bx-trash me-1"></i> Move To Trashcan</a>
                                          </div>
                                      </div>
                                  </td>
                              </tr>
                              <?php endforeach;?>

So when i click yes, it will call a delete php function with the id i passed. But, it just show the same link i write for onclick attribute.

Example: -The onclick attribute must be like this when i click "Move to trashcan" button of something.

onclick="window.location='http://localhost/NguyenTranTienHiep1/index.php/backend/delTempCat/46'"

Answer 1

change show modal with function

<a class="dropdown-item" data-id="<?=$val['id']?>" onclick="moveToTrash(this)"><i class="bx bx-trash me-1"></i> Move To Trashcan</a>

remove on click in yor modal button Yes

<button type="button" class="btn btn-primary btn-ok">Yes</button>

create function moveToTrash whit jquery to get id and pass to modal and show the modal, set onclick button Yes in modal

function moveToTrash(elm) {
  let id = $(elm).data('id');
  let modal = $('#confirmation');
  modal.find('.btn-ok').on("click", function() {
    window.location = `http://localhost/NguyenTranTienHiep1/index.php/backend/delTempCat/${id}`
  });
  modal.modal('show');
}