Confirmation Delete

PHP
1

Hi I would like to have a confirmation link when clicking on the image when I click on the image it should say yes or no

  <!DOCTYPE html>
    <?php
    require_once( 'lib/dbutils.php');
    require_once("photoalbum-common.php");
    ?>
    <html>
    <head>
    <title>HTML Photo Album</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' href='photoalbum.css'>
    <link rel='stylesheet' href='http://www.w3schools.com/lib/w3.css'>
    <script src='http://code.jquery.com/jquery-1.11.3.min.js'></script>
    <link rel='stylesheet' href='lib/lightbox2/css/lightbox.css'>
    </head>
    <body>

    <header class='w3-container w3-orange w3-center'>
      <h1>My Photo Album</h1>
      <h2>Your Name</h2>
      <p>Here are some photographs and descriptions.</p>
    </header>

    <?php

    $pdo = connect();

    if ( isset( $_GET['deletionid'])) {
      $errorMessage = deletePhotograph( $pdo, $_GET['deletionid']);
      if ( $errorMessage != "") {
print "<div class='errormessage'>$errorMessage</div>\n";
      } else {
print "<div class='message'>Image deleted.</div>\n";    
      }
    }

    if ( isset( $_POST['formid']) && $_POST['formid'] == 'fileupload') {
      $photoid = addPhotograph( $pdo, $_POST['name'], $_POST['description'], 'self', $_FILES['uploadfile']);
    }


    $sql = "SELECT * FROM `photographs` ORDER BY `photoid`";
    $stmt = $pdo->query( $sql);
    // get all rows in an array
    $rows = $stmt->fetchAll(PDO::FETCH_ASSOC);

    $numberOfPhotos = count( $rows);
      
    for( $i = 0; $i < $numberOfPhotos; $i++) {
      
      if ( $i % 3 == 0) {
if ( $i > 0) { print "</div>\n"; }
print "<div class='w3-row'>\n";
      }

      $row = $rows[$i];
      print "  <div class='w3-container w3-row w3-col l4'>\n";
      print "    <div class='w3-container w3-card-8 w3-margin-8'>\n";
      print "      <div class='w3-container w3-half w3-image'>\n";
      print "        <a class='example-image-link' data-lightbox='example-1' href='images/".$row['image']."'><img src='images/".$row['image']."' class='example-image w3-circle'></a>\n";
      print "        <div class='w3-title w3-text-purple'>".$row['name']."</div>\n";
      print "      </div>\n";
      print "      <div class='w3-container w3-half'>\n";
      print $row['description']."\n";
      print "      <a href='?deletionid=".$row['photoid']."' class='link'>(Delete)</a>";
      print "      </div>\n";
      print "    </div>\n";
      print "  </div>\n";  
    }

    print "</div>\n";


    ?>
    <div class='w3-container w3-center'>
      <a href="#id01" class='link'>Add images</a>
    </div>

    <div id="id01" class="w3-modal">
      <div class="w3-modal-dialog">
<div class="w3-modal-content w3-card-4">
  <header class="w3-container w3-teal"> 
    <a href="#" class="w3-closebtn">&times;</a>
    <h2>Upload photograph</h2>
  </header>
  <div class="w3-container">
    <form action='?' method='post' enctype='multipart/form-data' id='photoform' class='w3-container'>
      <div class="w3-group">
<input type='file' name='uploadfile' class='w3-input'>
<label class="w3-label">Image file</label>
      </div>
      <div class="w3-group">   
<input type='text' name='name' class='w3-input' required>
<label class="w3-label">Name</label>
      </div>
      <div class="w3-group">   
<textarea name='description' class='w3-input' required></textarea>
<label class="w3-label">Description</label>
      </div>
      <input type='hidden' name='formid' value='fileupload'>

      <input type='submit' value='Upload' id='uploadbutton' class='w3-btn'>
    </form>
  </div>
  <footer class="w3-container w3-teal">
    <p></p>
  </footer>
</div>
      </div>
    </div>

    <footer class='w3-container w3-orange w3-padding-jumbo'>
    	<div class='w3-container w3-center'>
    		<a href='mailto:childm@lsbu.ac.uk' class='link'>Contact me</a>
    	</div>
    </footer>
    <script src='lib/lightbox2/js/jquery.js'></script>
    <script src='lib/lightbox2/js/lightbox.js'></script>
    </body>
</html>
2

Add an alert box in javascript in an onclick event of the image if user press yes button then redirect them again into page and delete it.

3

An alert box doesn’t have a yes button it only has an ok button and either a checkbox to turn off JavaScript or a link to turn off all subsequent alerts - alert (along with confirm and prompt) were re-purposed for debugging only after Netscape 4 died and became obsolete when console.log replaced them.

4

A confirm() prompt then? That has OK and Cancel.

5

confirm has - OK, Cancel, turn off JavaScript.

Apart from the fact that I turned off these debugging calls in my browser I usually used to select the third of these options whenever someone left one of these debugging calls in their live script. If they can’t remember to remove debugging calls from their JavaScript before it goes live then it may not be safe to run at all so when they ask if I want it turned off then of course I do.

See http://www.sitepoint.com/creating-nice-alerts-sweetalert/ for a far more appropriate solution that is not a JavaScript debugging call.

1 Like
6

The problem is with using any dialog boxes

I have used them in “quick and dirty” code that was for my own use and sometimes in code with very limited use.
eg. a moderator plugin where users were “tech savvy” and more “forgiving” of poor practice.

Notes

Dialog boxes are modal windows - they prevent the user from accessing the rest of the program’s interface until the dialog box is closed. For this reason, you should not overuse any function that creates a dialog box (or modal window). And regardless, there are very good reasons to avoid using dialog boxes for confirmation.

(* a delete without an undo is given as a good reason to not use one)

HTML5 has a dialog tag, but sadly it seems to not be supported very well yet

IMHO if this code is for general use it would probably be better to go to a “confirmation page” instead.

1 Like
7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.