JavaScript confirm on PHP delete button

Question

How can I add a JavaScript alert to confirm (yes or no) when the user clicks the delete button? I tried adding a class to an alert:

<?php
//$con = mysqli_connect("localhost", "root", "root", "db");
$sql = "SELECT * FROM `uploads` where userId = " . $_SESSION['user'];
$qry = mysqli_query($conn,$sql) or die(mysqli_error($conn));

$table_content = "";

while($row = mysqli_fetch_assoc($qry)){
    $id = $row['id'];
    $name = $row['name'];
    $table_content .= "<tr>
                         <td>
                           <a href='listen.php?id=$id' target='_new'>$name </a>
                         </td>
                         <td>
                           <a href='delete.php?id=$id' type='button' class='btn btn-danger'>delete</a>
                         </td>
                       </tr>";
}

echo "<table>".$table_content."</table>";
?>

You have to use the `click` event on the button. Use `id` for button and based on that you can show an prompt or `modal` (recommended). And based on that response, use ajax to fire the delete request. — Kinshuk Lahiri, Apr 28 '17 at 11:06
See : http://stackoverflow.com/questions/9334636/how-to-create-a-dialog-with-yes-and-no-options — aprogrammer, Apr 28 '17 at 11:07
https://developer.mozilla.org/en-US/docs/Web/Events/beforeunload — Jai, Apr 28 '17 at 11:07
Tried adding a confirm class to the button and then a Javascript click confirm function (which works on links) but not on the PHP code as shown — Philly Hanna, Apr 28 '17 at 11:07

score 6 · Answer 1 · edited May 23 '17 at 12:26

6

For simplicity check this out.

<a onClick="return confirm('Are you sure you want to delete?')" href='delete.php?id=$id' type='button' class='btn btn-danger'>delete</a>

return false is actually doing three very separate things when you call it:

event.preventDefault();
event.stopPropagation();
Stops callback execution and returns immediately when called.

Since confirm method returns true or false, we can simply call it on onclick then the return determines the action.

reference: kamesh answer

 <a onClick="return confirm('Are you sure you want to delete?')" href='delete.php?id=$id' type='button' class='btn btn-danger'>delete</a>

edited May 23 '17 at 12:26

Community

1
1

answered Apr 28 '17 at 11:17

Lekens

1,823
17
31

Fails to load page :( – Philly Hanna Apr 28 '17 at 11:21
please can you be explicit, make it clearer the explanation – Theophilus Omoregbee Apr 28 '17 at 15:23

D. Pachauri · Answer 2 · 2017-04-28T11:12:19.147

1

I think thats what you are looking for.

<a href='delete.php?id=$id' onclick="return myFunction()" type='button' class='btn btn-danger'>delete</a>

<script>
function myFunction() {
var r = confirm("OK to delete?");
if (r == false) {
   return false;
} 

}
</script>

edited Apr 28 '17 at 11:12

answered Apr 28 '17 at 11:09

D. Pachauri

244
2
8

delboy1978uk · Answer 3 · 2017-04-28T11:23:29.487

If you are using Bootstrap, you can give this a whirl!

https://github.com/delboy1978uk/bs-delete-confirm

And if you aren't using bootstrap, give it a shot! Some great functionality ready to rock as soon as you include the css and js! This jQuery delete confirm code uses the Bootstrap modal, see an example here http://getbootstrap.com/javascript/#modals

<a href="http://nasa.gov" class="delete-confirm btn btn-primary">Go!</a>


$(document).ready(function(){
  $('.delete-confirm').deleteConfirm();
});

See a working Example HERE https://jsfiddle.net/myu3kr66/

score 0 · Answer 4 · answered Apr 28 '17 at 11:11

you can use a modal and on click of delete button, show that modal, in the modal, keep two buttons, yes and no ans assign id to both of them like, #yes and #no respectively. on click of yes, perform the delete operation and on click of no, keep the row as it is.

<td><a href='listen.php?id=$id' target='_new'>$name </a></td>
<td><a href='delete.php?id=$id' type='button' id="delete"                             

class='btn btn-danger'>delete</a></td>
 </tr>";
}
echo "<table>".$table_content."</table>"

 <script>

$('#delete).on('click',function(){

 $('#modal').show();
 $('#yes').on('click') {
//   perform delete action.
 }
 }
</script>

this is the basic structure of code, if you show me the issue, I can help you with that — pd1, Apr 28 '17 at 11:19

Bachcha Singh · Answer 5 · 2017-04-28T12:47:05.783

0

Please follow

<a href="javascript:void(0)" onclick="return deleteContent('<?php echo $id; ?>');" type="button" class="btn btn-danger">Delete</a>

Script

<script>
    function deleteContent(id) {
        if(confirm('Are you sure you want to delete this ?')) {
        window.location='delete.php?id='+id;
        }
    return false;
    }
</script>

Updated

<?php
 $con = mysqli_connect("localhost", "root", "root", "db");
 $sql = "SELECT * FROM `uploads` where userId = " . $_SESSION['user'];
 $qry = mysqli_query($conn,$sql) or die(mysqli_error($conn));

 echo "<table>";
 while($row = mysqli_fetch_assoc($qry)){
      $id = $row['id'];
      $name = $row['name'];
?>
<tr>
<td><a href="javascript:void(0)" onclick="return deleteContent('<?php echo $id; ?>');" type="button" class="btn btn-danger">Delete</a></td>
<td><a href='listen.php?id=<?php echo $id; ?>' target='_new'><?php echo $name; ?> </a></td>
</tr>

<?php } echo "</table>"; ?>

edited Apr 28 '17 at 12:47

answered Apr 28 '17 at 11:34

Bachcha Singh

3,850
3
24
38

Fails to load page – Philly Hanna Apr 28 '17 at 11:42
I removed the ?> from your code as there is more php after that. – Philly Hanna Apr 28 '17 at 12:21
Failed to load resource: the server responded with a status of 500 (Internal Server Error) trying with and without ?> – Philly Hanna Apr 28 '17 at 12:21
Did you see full code that I added to the question at the top? – Philly Hanna Apr 28 '17 at 13:40
yes i have, still is it not working? what is error? – Bachcha Singh Apr 28 '17 at 14:09

JavaScript confirm on PHP delete button

5 Answers5