How to add confirmation message before deleting?-CodePudding

I am trying to add a confirmation message before deleting a data in my table. But I don't know how and where to put the code. I tried look up other codes but it doesn't work.
Here is my code:

        <?php $a = 0?>

        <?php while ($row = mysqli_fetch_array($res)) { 

            echo "<tr id=".$a  .">
                <th scope='row' class='row-data'>".$row['user_id']."</th>
                <td class='row-data'>".$row['full_name']."</td>
                <td class='row-data'>".$row['user_name']."</td>
                <td><input type='button' 
                    value='EDIT'
                           onclick='editUser()'' /></td>
                <td><input type='button' 
                    value='DELETE' 
                      onclick='deleteUser()' /></td>
            </tr>
        
        </tbody>";
       }; ?>
 

        function deleteUser() {
            var rowId = 
                event.target.parentNode.parentNode.id;
          //this gives id of tr whose button was clicked
            var data = 
            document.getElementById(rowId).querySelectorAll(".row-data"); 
          /*returns array of all elements with 
          "row-data" class within the row with given id*/

            var uID = data[0].innerHTML;

            document.getElementById("toBeEdit").value = uID;
            document.getElementById("taskStatus").value = 'delete';
            //alert("ID: "   uID);
            
            const form  = document.getElementById('editForm');

            form.submit();

        }

    </script>

CodePudding user response：

You can use the built-in method confirm() in your deleteUser() function. Please see below code,

function deleteUser() {
         if(confirm('Are you sure want to delete user?')){
            var rowId = 
                event.target.parentNode.parentNode.id;
          //this gives id of tr whose button was clicked
            var data = 
            document.getElementById(rowId).querySelectorAll(".row-data"); 
          /*returns array of all elements with 
          "row-data" class within the row with given id*/

            var uID = data[0].innerHTML;

            document.getElementById("toBeEdit").value = uID;
            document.getElementById("taskStatus").value = 'delete';
            //alert("ID: "   uID);
            
            const form  = document.getElementById('editForm');

            form.submit();
          }

        }

The confirm() method displays a dialog box with a message, an OK button, and a Cancel button.

The confirm() method returns true if the user clicked "OK", otherwise false.

CodePudding user response：

---> you should to add this code include your delete function

if(window.confirm("do you want delete this data")){

--> your code with js <--

}else{ return false;