Delete image on click using JavaScript

Question

<?php     
 $imgcheck=mysql_query("

  SELECT *
FROM `images`
 WHERE `deal_id` =$_SESSION[eid]
LIMIT 0 , 30

 ");
 $numimgcheck=mysql_num_rows($imgcheck);
  if($numimgcheck==0){echo '<span style=color:#ff0000; >No pictures uploaded</span>';}
    while ($rowimg2= mysql_fetch_array($imgcheck)){ 


     $imgname=$rowimg2['name'];

     {
    //   $rowimg2 = mysql_fetch_array($imgcheck) or die(mysql_error());

     //echo $imgname;
     echo '    <a href="users/'.$_SESSION['userid'].'/images/'.$imgname.'"   rel="lightbox[slide]" caption=".">';
       }


       { echo '<img src="users/'.$_SESSION['userid'].'/images/thumbs/'.$imgname.'"   border="0" />';}
     { echo '</a><a href="delimg.php?id='.$imgname.'"><img src="images/del.jpg" width="22" height="22" onclick="deleteImg(this);" />   </a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
     ';

    }

  //<input type="checkbox" name="'.$imgname.'" id="'.$imgname.'" > if($numimgcheck==0){      $havepic=' <td width="50px" align="center"><div class="iddivimg"> <img src="users/default/nopic_small.jpg"  />

// ';}

    }
    ?>

There is a page in my website where users can edit and delete images. In this page, there is a delete button (itself a 20x20 image) near every image. When the user clicks on that button, its corresponding image will be deleted. I want it to be in such a way that when I click the delete image a confirm box should appear, asking "Are you sure you want to delete this image?" If I click yes, I want to delete the MySQL table's data and image. If I click no, nothing should happen. How can I do this?

Answer 1

Put each image in its own form with the image identifier as hidden value and use the delete image as CSS background image of the submit button. Finally use JS confirm() function for the confirmation.

<form action="delete.php" method="post">
    <img src="image1.png" />
    <input type="hidden" name="id" value="1" />
    <input type="submit" class="delete" value="" onclick="return confirm('Sure?')" />
</form>
<form action="delete.php" method="post">
    <img src="image2.png" />
    <input type="hidden" name="id" value="2" />
    <input type="submit" class="delete" value="" onclick="return confirm('Sure?')" />
</form>
...

with CSS

.delete {
    background-image: url('delete.png');
    width: 20px;
    height: 20px;
    border: 0;
    cursor: pointer;
}

This is easily done in a loop. You could use jQuery to unobtrusively introduce ajaxical powers, whenever necessary.

Answer 2

Its hard to help without some sample code. assuming you have a function deleteImg() and an image <img src="delete.jpg" onclick="deleteImg(this);" /> <img src="delete.jpg" onclick="deleteImg(this);" />

then you do:

function deleteImg(image)
{
  if(confirm("are you sure you want to delete this image"))
  {
      ... // delete image logic.
  }
}

http://www.javascripter.net/faq/confirm.htm

Answer 3

What server-side language is being used? Assuming PHP for the purposes of this explanation.

Rough sketch (AJAX method):

1. Create a server-side page that can be called to delete an image (say, delete_image.php?image_id={id} )
2. Onclick on the image, use confirm to validate user wants to continue.
3. If confirm was true, create an AJAX post to the delete_image call (see jQuery library for easy method to do this).
4. Remove image from the page (or refresh).

Form POST method:

1. Wrap every delete image button in a form, which posts to delete_image.php, with a hidden input variable containing the image id.
2. Onclick (or onsubmit) use javascript confirm , and only continue on true result.
3. In delete_image.php , retrieve image_id from post form
4. Delete corresponding image from MySQL database with a DELETE query.
5. Redirect back to image display page to refresh with image removed.

Answer 4

It seems you haven't tried searching the net for solution because I'm sure you will find some if not many. When clicked on the image, call a javascript function that prompts the user with a question, using the JS confirm() function, like

if (confirm("Do you want to delete the image?")) {
    // call your PHP script that will then delete the image
}

Answer 5

In the code that you had recently added to your question, I think the issue is that the <a href> is always executed because it runs independent of your call to the function deleteImg().

<a href="delimg.php?id='.$imgname.'">
    <img src="images/del.jpg" width="22" height="22" onclick="deleteImg(this);" />
</a>

I think if you change your code to this, it should work:

<a href="delimg.php?id='.$imgname.'" onclick="deleteImg(this);">
    <img src="images/del.jpg" width="22" height="22"  />
</a>

And in your deleteImg() function, add return TRUE; in the IF part of your confirm() and add return FALSE in the ELSE part. Something like this:

if (confirm("Do you want to delete the image?")) {
    // call your PHP script that will then delete the image
    return TRUE;
} else {
    return FALSE;
}

Answer 6

Well there is no single solution to this so I'll provide some technologies that will be useful for you (I assume from the tag that you are using Java environment on server).

As for the confirm box, In case you mean something like DHTML confirm boxes that are commonly seen on Facebook, you might want to use jQuery UI component. Have a look at this : http://jqueryui.com/demos/dialog/#modal-confirmation

You can also use javascript confirm function, but these boxes are currently in vogue.

As far as updating the database is considered, of course that has to be done from server side. You can set a Servlet to do the deletion or a web service for the same. It just is a matter of passing right parameters.