Question

I don’t have much experience with JavaScript. However I wanted to do a small thing with JavaScript and MySQL. And I could use some help.

I have a page in PHP which search for something and it’s gives the results based on the search query.
For each result it adds 3 images, one which as a URL where you can view the content. Other where you can edit that content.

And the third one you can delete.
For that I wanted to do something nice.

Like, the user clicks the image, a confirmation dialog appears. In that box it asks if you sure you want to delete the data.
If yes, it would delete the data. where ID =

The ID is printed in the onclick action, inside the JavaScript function in the image using PHP echo.

If not, we would close the dialog and continue.

Answer 1

OK, so let’s assume the following (forgive me for re-clarifying the question):

You have a number of rows of some form, with delete links, and you want to confirm that the user actually wants to delete it?

Let’s assume the following HTML:

<tr>
   <td>Some Item 1</td>
   <td><a href="?mode=delete&id=1" class="delete-link">Delete</a></td>
</tr>
<tr>
   <td>Some Item 2</td>
   <td><a href="?mode=delete&id=2" class="delete-link">Delete</a></td>
</tr>
<tr>
   <td>Some Item 3</td>
   <td><a href="?mode=delete&id=3" class="delete-link">Delete</a></td>
</tr>

So I’m assuming the same PHP script can run the delete, picking up on the mode parameter:

<?php
    if($_GET['mode'] == 'delete') {
       //Check if there is something in $_GET['id'].
       if($_GET['id']) {

          //Prevent SQL injection, just to be safe.
          $query = "DELETE FROM sometable WHERE id='" . mysql_real_escape_string($_GET['id']) . "'";

          mysql_query($query);
       }
    }

I’m going to give two solutions to this on the JavaScript side – the first with an inline, slightly ugly solution, the second using jQuery (http://jquery.com/), and unobtrusive JavaScript.

Ok, so for the first, I would bind on the onclick event of each link.

<tr>
   <td>Some Item 3</td>
   <td><a href="?mode=delete&id=3" class="delete-link" onclick="checkDeleteItem();">Delete</a></td>
</tr>

Then create a JavaScript function:

//This will get called when the link is clicked.
function checkDeleteItem() {
   //show the confirmation box
   return confirm('Are you sure you want to delete this?');
}

As I said, I don’t like that solution, because it is horribly obtrusive, and also not particularly robust.

Now, the jQuery solution:

//Do all this when the DOM is loaded
$(function() {
   //get all delete links (Note the class I gave them in the HTML)
   $("a.delete-link").click(function() {
       //Basically, if confirm is true (OK button is pressed), then
       //the click event is permitted to continue, and the link will
       //be followed - however, if the cancel is pressed, the click event will be stopped here.
       return confirm("Are you sure you want to delete this?");
   });
});

I heartily recommend this solution over the previous one, since it is much more elegant and nice, and is generally best practice.