Pass id from one function to event listener function to confirm delete action

Question

Trying to have functionality to where when user clicks on trash can icon, a modal pops up asking them if they're sure if they want to delete or not. If they hit yes, a delete action is committed.

However, my problem that I'm having a hard time figuring out is passing my id from my function that has the parameter containing the userid to my other anonymous function event listener that listens for whether the delete button was clicked on or not.

I can't put the event listener anonymous function inside of the deleteUser function because this causes multiple delete actions to happen.

For example, 1st delete will work fine, I delete again, 2 deletes will happen at once, I delete again 3 deletes will happen at once.

here is an example of what I tried and won't work because it will cause many delete actions to happen at once.

function deleteUser(userid) {
  deleteButton.addEventListener('click', function(userid){
   var deleteData = userid;

   // Delete the record
   $.ajax({
    method: 'POST',
    url: 'delete-user-action.php',
    data: deleteData,
    success: function(){
     console.log('user was successfully deleted');
    }
   })
  })
}

and I understand why it's happening because the event listener to attaching itself every time the function is invoked. So I decided to move it outside like this:

function deleteUser(userid) {
  console.log('i have access to id in this function');
}

    deleteButton.addEventListener('click', function(userid){
        // How can I get access to userid from deleteUser function?
        var deleteData = userid;

        // Delete the record
        $.ajax({
            method: 'POST',
            url: 'delete-user-action.php',
            data: deleteData,
            success: function(){
                console.log('user was successfully deleted');
            }
        })
    })

So my question is, how can i get access to deleteUser parameter userid without causing multiple delete actions to happen?

also, here is my php code that I'm using on the server to get the id:

<i class="fas fa-edit" data-toggle="modal" data-target="#editModal" id="'.$item['mem_id'].'"></i> <i class="fas fa-trash" data-toggle="modal" data-target="#deleteModal" onclick='."deleteUser('".$item['mem_id']."')".' id="'.$item['mem_id'].'"></i>

Answer 1

I recommend passing integer values from the dom to javascript by way of a data- attribute.

id attributes cannot start with a number. I don't recommend using purely numeric element ids -- they lose their context/meaning within the scope of the html document. data-id, for instance, can simply be an integer. e.g. ... data-id={$item['mem_id']} ...'

Once you have the $this element at your disposal, just use the $(this).data('id') value in your ajax call.

The added convenience here is that you won't need to strip any characters from the passed value (in js or php).

Answer 2

First, you'll want to make use of Unobtrusive JavaScript and replace that onclick with an event listener, as you appear to already be in the process of doing.

Second, I note that you're outputting the ID as the id parameter for both the edit and deletion icons. This is invalid markup, and will cause problems. Instead, I suggest prefixing the action to the ID:

<i class="fas fa-edit" ... id="edit_<?php echo $item['mem_id']; ?>"> // edit_1
<i class="fas fa-delete" ... id="delete_<?php echo $item['mem_id']; ?>"> // delete_1

Now, considering you're outputting the userid in question to the id field of the element being clicked on, there's no need for the deleteUser function at all; simply grab the ID of the deletion element itself, with this.id:

var deleteButton = document.getElementById('delete_1');

deleteButton.addEventListener('click', function() {
  var deleteData = this.id;
  console.log(deleteData);

  /*
  $.ajax({
    method: 'POST',
    url: 'delete-user-action.php',
    data: deleteData,
    success: function() {
      console.log('user was successfully deleted');
    }
  })
  */
})

<i class="fas fa-edit" id="edit_1">Edit</i>
<i class="fas fa-trash" id="delete_1">Delete</i>