Deleting database data with button in table

Question

I have a search page on my web app which searches for events in my event table in my database. I would like to have it so that there is a delete button at the end of the search result with the ability to delete a database entry but also a pop up alert box before they delete the data.

My search results are displayed with the code below:

 if(mysqli_num_rows($result) > 0) { echo "<br>Result Found: "; echo "<br><table>"; While($row = $result->fetch_assoc()) { echo "<tr>"; echo "<td>Event Number: " . $row['EventID'] . "</td>"; echo "</tr><tr>"; echo "<td>Location: " . $row['Location'] . "</td>"; echo "</tr><tr>"; echo "<td><input type='button' name='Delete' value='Delete' onClick='getConfirmation();'></td>"; } echo "</table 

I'm not too sure what to put in the javascript function. I want it to come up a basic alert box and if the user clicks the okay button then the action will be 'delete.php' and ideally another pop-up come up saying "Record Deleted Successfully". I also need to make sure to get the eventID from the record so that I can delete it successfully. So far for the JS function I have:

 <script type = "text/javascript"> <!-- function getConfirmation() { var retVal = confirm("Are you sure you would like to delete this record?"); if( retVal == true ) { delete.php document.write("Record deleted successfully"); } else { return false; } } //--> </script> 

I know this is wrong but I am wondering how I can fix this? Also could I just put it that if they press yes the php executes rather than going to delete.php?

Answer 1

To achieve this, you need to pass eventId in your onclick event as below:

if(mysqli_num_rows($result) > 0) {

echo "<br>Result Found: ";
echo "<br><table>";

While($row = $result->fetch_assoc()) {
echo "<tr>";
echo "<td>Event Number: " . $row['EventID'] . "</td>";
echo "</tr><tr>";
echo "<td>Location: " . $row['Location'] . "</td>";
echo "</tr><tr>";
echo "<td><input type='button' name='Delete' value='Delete' onClick='getConfirmation(".$row['EventID'].");'></td>";               
        }
echo "</table>";

and in your JS code, you need to: 1. Get eventId in your js function. 2. Call ajax to delete that event. 3. show success alert after

       <script type = "text/javascript">
            function getConfirmation(eventId) {
               var retVal = confirm("Are you sure you would like to delete this record?");
               if( retVal == true ) {
                   $.ajax({
                      url: "delete.php",
                      method: "POST",
                      data: {eventId: eventId},
                      success: function (response) {
                             if(response.status) {
                                 alert("Record Deleted Successfully");
                             }
                      }
                 });
               }  else {
                  return false;
               }
            }
      </script>

Also, in your delete.php file, you need to get eventId by $_POST['eventId'] and you can execute delete query. and you need to send back to status. Hope it will help you.