CODEWITHSUNDEEP
javascriptmysql
Fábio Antunes
Fábio Antunes

Reputation: 17164

JavaScript - confirmation box. | Yes? > delete data from MySQL / No - do nothing

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.

Upvotes: 2

Views: 19320

Answers (4)

edeverett
edeverett

Reputation: 8218

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 its 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 your dialogue. If the user clicks yes, then you'll need to trigger the forms onsubmit() event with JavaScript and if 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.

Upvotes: 0

Alistair Evans
Alistair Evans

Reputation: 36503

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.

Upvotes: 10

Canavar
Canavar

Reputation: 48088

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()" />

Upvotes: 0

Kobi
Kobi

Reputation: 138107

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.

Upvotes: 1

Related Questions