How to send custom value to sweetalert javascript code from PHP?

May 18, 2022

I want to warn user on attempting to delete a file. how can I transfer some details via the html button to this javascript ? for example, each time the user will be deleting different files, so the button should sent different file id to the fileid part of the url.

here is the .js example

    <script>
document.getElementById("custom-sa-warning") && document.getElementById("custom-sa-warning").addEventListener("click", function() {
    Swal.fire({
        html: '<div class="mt-3"><lord-icon src="https://cdn.lordicon.com/gsqxdxog.json" trigger="loop" colors="primary:#f7b84b,secondary:#f06548" style="width:100px;height:100px"></lord-icon><div class="mt-4 pt-2 fs-15 mx-5"><h4>Are you Sure ?</h4><p class="text-muted mx-4 mb-0">Are you Sure You want to Delete this Account ?</p></div></div>',
        showCancelButton: !0,
        confirmButtonClass: "btn btn-primary w-xs me-2 mb-1",
        confirmButtonText: "Yes, Delete It!",
        cancelButtonClass: "btn btn-danger w-xs mb-1",
        buttonsStyling: !1,
        showCloseButton: !0
    }).then((result) => {
   if (result.value) {
     window.location.href = `https://somedimain.com/delete.php?id=fileid`
   }
 });
})
</script>

Here is the html to initiate the popup

<button type="button" class="btn btn-primary" id="custom-sa-warning">Click me</button>

Already tried
var test = 'https://somedimain.com/delete.php?id=$fileid';

if (result.value) {
       var example = test;
     window.location.href = example
   }

, it works, but how can I change this var test value from a button ?

>Solution :

Add data-fileId attribute to your button and when you click to button, get clicked buttons ‘data-fileId’. it should be like this

html:

<button type="button" class="btn btn-primary" id="custom-sa-warning" data-fileId="write your fileId">Click me</button>

js:

<script>
document.getElementById("custom-sa-warning") && document.getElementById("custom-sa-warning").addEventListener("click", function(event) {
    var el = event.target || event.srcElement;
    var fileId = el.getAttribute('data-fileId');
    Swal.fire({
        html: '<div class="mt-3"><lord-icon src="https://cdn.lordicon.com/gsqxdxog.json" trigger="loop" colors="primary:#f7b84b,secondary:#f06548" style="width:100px;height:100px"></lord-icon><div class="mt-4 pt-2 fs-15 mx-5"><h4>Are you Sure ?</h4><p class="text-muted mx-4 mb-0">Are you Sure You want to Delete this Account ?</p></div></div>',
        showCancelButton: !0,
        confirmButtonClass: "btn btn-primary w-xs me-2 mb-1",
        confirmButtonText: "Yes, Delete It!",
        cancelButtonClass: "btn btn-danger w-xs mb-1",
        buttonsStyling: !1,
        showCloseButton: !0
    }).then((result) => {
    if (result.value) {
     window.location.href = "https://somedimain.com/delete.php?id=" + fileId
    }
  });
})
</script>