JavaScript - boîte de confirmation. | Oui? > supprimer des données de MySQL/No - ne rien faire

Question

Je n'ai pas beaucoup d'expérience avec JavaScript. Cependant, je voulais faire une petite chose avec JavaScript et MySQL. Et je pourrais utiliser de l'aide.

J'ai une page en PHP qui recherche quelque chose et donne les résultats en fonction de la requête de recherche. Pour chaque résultat, il ajoute 3 images, l'une comme URL où vous pouvez voir le contenu. Autre où vous pouvez modifier ce contenu.

Et le troisième, vous pouvez supprimer. Pour cela je voulais faire quelque chose de bien. Comme, l'utilisateur clique sur l'image, une boîte de dialogue de confirmation apparaît. Dans cette case, il vous demande si vous êtes sûr de vouloir supprimer les données. Si oui, les données seraient supprimées. où ID =

L'ID est imprimé dans l'action onclick, à l'intérieur de la fonction JavaScript dans l'image en utilisant PHP echo.

Sinon, nous fermons la boîte de dialogue et continuons.

Answer 1

OK , donc supposons ce qui suit (pardonnez-moi de re-clarifier la question):

Vous avez un certain nombre de lignes de quelque forme, avec des liens de suppression, et vous voulez confirmer que l'utilisateur veut réellement supprime-le?

Supposons que le code HTML suivant:

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

Je suppose donc que le même script PHP peut exécuter la suppression, la cueillette sur le paramètre de mode:

<?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); 
     } 
    } 

Je vais donnez deux solutions à cela sur le côté JavaScript - le premier avec une solution inline, légèrement laide, la seconde utilisant jQuery (http://jquery.com/), et JavaScript discret. Ok, donc pour le premier, je voudrais lier sur l'événement onclick de chaque lien.

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

Ensuite, créez une fonction JavaScript:

//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?'); 
} 

Comme je l'ai dit, je ne aime pas cette solution, car il est horriblement importune, et pas non plus particulièrement robuste.

Maintenant, la solution jQuery:

//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?"); 
    }); 
}); 

, je recommande vivement cette solution par rapport au précédent, car il est beaucoup plus élégant et agréable, et est généralement la meilleure pratique.

Answer 2

Ce dont vous avez besoin est un formulaire HTML de base qui sera soumis et effacera. Obtenez le bon HTML pour ce premier - je suggère que chaque image a son propre formulaire avec un champ caché pour la valeur ID et l'image utilise un bouton d'image: <input type="image" />

Une fois que vous avez ce travail, vous pouvez ajouter le dialogue d'avertissement JavaScript . Vous devrez remplacer l'événement submit du formulaire par votre propre fonction qui empêche la soumission du formulaire (en renvoyant false), puis afficher votre dialogue. Si l'utilisateur clique sur oui, alors vous aurez besoin de déclencher l'événement formulaires onsubmit() avec JavaScript et si l'utilisateur clique non, il suffit de masquer la boîte de dialogue.

En outre, ayez une lecture sur JavaScript discret - DOM Scripting by Jeremy Keith est un livre fanatique qui expliquera simplement comment faire ce genre de choses.

Answer 3

Ne peut pas vous aider avec la partie php, mais vous pouvez utiliser JavaScript de Confirm:

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

Vous pouvez lier une fonction à l'événement, cliquez sur les boutons de suppression. Renvoyer false leur fera ignorer le clic.

Answer 4

Si vous avez un bouton qui supprime la ligne que vous voulez, puis appeler la fonction ci-dessous pour confirmer l'utilisateur s'il veut supprimer:

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

appel comme ça:

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