Java script - Confirmation box. | Yes? > delete data from mysql / No - do nothing

Question

Hello.

I don't have much experience with Javascript. However i wanted to do a small thing with js and mysql. And i could use some help.

I have a page in PHP wich you search for something and its gives the results based on the search query. For each result he 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 he asks if are you sure you want to delete the data. If yes. whe would delete the data. where ID =

The id its printed in the onclick action, inside the Javascript function in the image using PHP echo.

If not. we would close the dialog and continue.

I think i have expressed correctly.

Kind Regards and Thanks for the Help

Answer 1

What you need is a basic html form that will submit and do the deletion. Get the HTML right for this first - I would suggest each image has it's own form with a hidden field for the ID value and the image uses an image button : <input type="image" />

Once you have this working you can add the Javascript warning dialogue. You will need to replace the form's submit event with your own function that prevents the form from submitting (by returning false) and then show's your dialogue. If the user clicks yes, then you'll need to trigger the forms onsubmit() event with JS and in the user clicks no then just hide the dialogue.

Also, have a read about Unobtrusive Javascript - Dom Scripting by Jeremy Keith is a fanastic book that will simply explain how to do this stuff.

Answer 2

Can't help you with the php part, but you can use JavaScript's Confirm:

var ok = confirm('Are you sure you want to delete this row');
//ok is true or false

You can bind a function to the click event on your delete buttons. Returning false will cause them to ignore the click.

Answer 3

If you have a button that deletes the row you want, then call the function below to confirm user if he wants to delete :

function confirmDelete()
{
  if (confirm('Do you want to delete ?'))
  {
      return true;
  }
  else
  {
      return false;
  }
}

call it like that :

<input type="button" value="Delete Record" onclick="confirmDelete()" />

Answer 4

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 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.