Wie kann ich vor dem Löschen eine Bestätigungsnachricht anzeigen?


202

Ich möchte eine Bestätigungsmeldung erhalten , wenn ich auf Löschen klicke (dies ist möglicherweise eine Schaltfläche oder ein Bild). Wenn der Benutzer ' Ok' wählt, wird gelöscht, andernfalls Cancelpassiert nichts , wenn auf ' ' geklickt wird.

Ich habe versucht, dies zu wiederholen, als auf die Schaltfläche geklickt wurde, aber durch das Echo von Inhalten verlieren meine Eingabefelder und Textfelder ihren Stil und ihr Design.

Antworten:


329

Schreiben Sie dies im onclickFalle der Schaltfläche:

var result = confirm("Want to delete?");
if (result) {
    //Logic to delete the item
}

geniale Antwort! kurz, präzise und arbeitet effizient
John

Für jede nicht erfahrene JavaScript-Person bedeuten Ihre Codezeilen nichts. Das Beispiel sieht nicht schlüssig und verwirrend aus. Trotzdem ist es eine gute Antwort.
Samuel Ramzan

Ich denke, Sie sollten Ihrer Antwort einige Details hinzufügen. Warum fügen Sie den Code in die Schaltfläche ein, anstatt ihn in den Kopfbereich oder in eine externe Datei zu schreiben? Dies ist eine sehr allgemeine Funktion, und der Programmierer möchte sie möglicherweise mehrmals für mehrere Schaltflächen verwenden. Ich würde sie nicht in eine bestimmte Schaltfläche schreiben ...
franz1

284

Sie können wie folgt besser verwenden

 <a href="url_to_delete" onclick="return confirm('Are you sure you want to delete this item?');">Delete</a>

2
Dies sollte weit oben im Thread sein. Einfach, schnell, effektiv. Macht den Job einfach perfekt.
DonExo

Sehr gefährlich! Was ist, wenn Javascript deaktiviert wurde? Oder ob ein Spinnen- / Suchbot diese Seite lesen würde? Es würde dann allen Links folgen und alles löschen! Einige Browser-Plugins folgen auch allen Links auf einer Seite, um sie vorab zwischenzuspeichern. Mach das NIE so! Löschvorgänge sollten niemals eine GET-Anforderung sein.
Daniele Testa

Es ist nicht weniger gefährlich als die Antwort Nr. 1, jedes JavaScript ist gefährlich, wenn JavaScript deaktiviert ist. Das Ein- und Ausschalten von JavaScript ist eine persönliche Entscheidung des Benutzers. Wenn JavaScript deaktiviert ist, sollte der Benutzer besser wissen, dass er auf keiner Website Schaltflächen drücken darf. Es gibt immer eine serverseitige Überprüfung als wunderbare Alternative.
Samuel Ramzan

53

So würden Sie es mit unauffälligem JavaScript und der Bestätigungsnachricht machen, die im HTML gehalten wird.

<a href="/delete" class="delete" data-confirm="Are you sure to delete this item?">Delete</a>

Dies ist reine Vanille JS, kompatibel mit IE 9+:

var deleteLinks = document.querySelectorAll('.delete');

for (var i = 0; i < deleteLinks.length; i++) {
  deleteLinks[i].addEventListener('click', function(event) {
      event.preventDefault();

      var choice = confirm(this.getAttribute('data-confirm'));

      if (choice) {
        window.location.href = this.getAttribute('href');
      }
  });
}

Sehen Sie es in Aktion: http://codepen.io/anon/pen/NqdKZq


Dies funktioniert perfekt, aber nur für die erste Schaltfläche. Was ist, wenn wir 20 oder mehr davon haben? Vielen Dank!
Emotionalität

1
Sie haben Recht, es liegt daran, dass querySelector nur mit dem ersten Element übereinstimmt. Ich habe die Antwort bearbeitet und den Codepen so gegabelt, dass stattdessen querySelectorAll verwendet wird.
DevAntoine

Wäre cool, wenn dieses Beispiel so bearbeitet würde, dass es auch mit deaktiviertem JavaScript funktioniert. href="https://stackoverflow.com/delete"Ich denke , das würde ausreichen. Oder ein Formular senden Beispiel.
Ciro Santilli 10 冠状 病 六四 事件 10

1
@CiroSantilli 巴拿馬 文件 六四 事件 法轮功 Dank der Funktion event.preventDefault () ist dies bereits der Fall. Sie können das Hash-Zeichen durch eine URL ersetzen, es wird nicht ausgelöst. Wenn JavaScript deaktiviert ist, funktioniert der Link jedoch wie erwartet.
DevAntoine

1
@CiroSantilli 法轮功 文件 六四 事件 法轮功 Hier geht's los;)
DevAntoine

28
function ConfirmDelete()
{
  var x = confirm("Are you sure you want to delete?");
  if (x)
      return true;
  else
    return false;
}


<input type="button" onclick="ConfirmDelete()">

Ich denke, dass es besser ist, nur einen Rückgabepunkt zu haben. also bevorzuge ich
jedi

17
Oder einfach nur return confirm("…"). Es ist nicht erforderlich, eine boolesche Variable zuzuweisen und dann in if / else zu verzweigen.
Slhck

16

Versuche dies. Für mich geht das

 <a href="delete_methode_link" onclick="return confirm('Are you sure you want to Remove?');">Remove</a>

1
Schön und effizient.
Samuel Ramzan

13

Es ist sehr einfach und eine Codezeile

<a href="#" title="delete" class="delete" onclick="return confirm('Are you sure you want to delete this item')">Delete</a>

Es sieht so aus, als ob es bereits eine Antwort wie diese direkt unter der akzeptierten Antwort gibt.
Hat

12

Verbesserung auf user1697128 (weil ich es noch nicht kommentieren kann)

<script>
    function ConfirmDelete()
    {
      var x = confirm("Are you sure you want to delete?");
      if (x)
          return true;
      else
        return false;
    }
</script>    

<button Onclick="return ConfirmDelete();" type="submit" name="actiondelete" value="1"><img src="images/action_delete.png" alt="Delete"></button>

bricht die Formularübermittlung ab, wenn Abbrechen gedrückt wird


8

Ich möchte anbieten, wie ich das mache:

<form action="/route" method="POST">
<input type="hidden" name="_method" value="DELETE"> 
<input type="hidden" name="_token" value="the_token">
<button type="submit" class="btn btn-link" onclick="if (!confirm('Are you sure?')) { return false }"><span>Delete</span></button>
</form>

6

HTML

<input onclick="return myConfirm();" type="submit" name="deleteYear" class="btn btn-danger" value="Delete">

Javascript

<script>
function myConfirm() {
  var result = confirm("Want to delete?");
  if (result==true) {
   return true;
  } else {
   return false;
  }
}


4

HTML:

<a href="#" class="delete" data-confirm="Are you sure to delete this item?">Delete</a>

Verwenden von jQuery:

$('.delete').on("click", function (e) {
    e.preventDefault();

    var choice = confirm($(this).attr('data-confirm'));

    if (choice) {
        window.location.href = $(this).attr('href');
    }
});

Eine gute jQuery-Anpassung der DevAntoines-Antwort ( stackoverflow.com/a/19973570/1337887 ). Ein etwas allgemeinerer Ansatz wäre jedoch die Verwendung von "$ ('A [Datenbestätigung]')" anstelle von "$ ('. Delete')". Auf diese Weise benötigen Sie die Schaltflächen nicht, um eine Löschklasse zu haben, sondern integrieren einfach das Datenbestätigungsattribut.
Florian


4
<a href="javascript:;" onClick="if(confirm('Are you sure you want to delete this product')){del_product(id);}else{ }" class="btn btn-xs btn-danger btn-delete" title="Del Product">Delete Product</a>

<!-- language: lang-js -->
<script>
function del_product(id){
    $('.process').css('display','block');
    $('.process').html('<img src="./images/loading.gif">');
    $.ajax({
        'url':'./process.php?action=del_product&id='+id,
        'type':"post",
        success: function(result){
            info=JSON.parse(result);
            if(result.status==1){
                setTimeout(function(){
                    $('.process').hide();
                    $('.tr_'+id).hide();
                },3000);
                setTimeout(function(){
                    $('.process').html(result.notice);
                },1000);
            } else if(result.status==0){
                setTimeout(function(){
                    $('.process').hide();
                },3000);
                setTimeout(function(){
                    $('.process').html(result.notice);
                },1000);
            }
        }
    });
}
</script>


3

Wenn Sie an einer schnellen, hübschen Lösung mit CSS-Format interessiert sind, können Sie SweetAlert verwenden

$(function(){
  $(".delete").click(function(){
      swal({   
	  	  title: "Are you sure?",   
		  text: "You will not be able to recover this imaginary file!",   
		  type: "warning",   
		  showCancelButton: true,   
	  	  confirmButtonColor: "#DD6B55",   
	  	  confirmButtonText: "Yes, delete it!",   
	  	  closeOnConfirm: false 
	  }, 
	  function(isConfirmed){ 
        if(isConfirmed) {
          $(".file").addClass("isDeleted");
          swal("Deleted!", "Your imaginary file has been deleted.", "success"); 
        }
      }
    );
  });
});
html { zoom: 0.7 } /* little "hack" to make example visible in stackoverflow snippet preview */
body > p { font-size: 32px }

.delete { cursor: pointer; color: #00A }
.isDeleted { text-decoration:line-through }
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="http://t4t5.github.io/sweetalert/dist/sweetalert-dev.js"></script>
<link rel="stylesheet" href="http://t4t5.github.io/sweetalert/dist/sweetalert.css">

<p class="file">File 1 <span class="delete">(delete)</span></p>


2

um eine Konformationsnachricht zu setzen, wenn Sie etwas in PHP & MySQL löschen ...

Verwenden Sie diesen Skriptcode:

<script>
    function Conform_Delete()
    {
       return conform("Are You Sure Want to Delete?");
    }
</script>

Verwenden Sie diesen HTML-Code:

<a onclick="return Conform_Delete()" href="#">delete</a>

2
var txt;
var r = confirm("Press a button!");
if (r == true) {
   txt = "You pressed OK!";
} else {
   txt = "You pressed Cancel!";
}

var txt;
var r = confirm("Press a button!");
if (r == true) {
    txt = "You pressed OK!";
} else {
    txt = "You pressed Cancel!";
}


1

Verwenden von jQuery:

$(".delete-link").on("click", null, function(){
        return confirm("Are you sure?");
    });

1

Ich weiß, dass dies alt ist, aber ich brauchte eine Antwort und keine davon, aber die Antwort von alpesh funktionierte für mich und wollte mit Leuten teilen, die möglicherweise das gleiche Problem hatten.

<script>    
function confirmDelete(url) {
    if (confirm("Are you sure you want to delete this?")) {
        window.open(url);
    } else {
        false;
    }       
}
</script>

Normale Version:

<input type="button" name="delete" value="Delete" onClick="confirmDelete('delete.php?id=123&title=Hello')">

Meine PHP-Version:

$deleteUrl = "delete.php?id=" .$id. "&title=" .$title;
echo "<input type=\"button\" name=\"delete\" value=\"Delete\" onClick=\"confirmDelete('" .$deleteUrl. "')\"/>";

Dies ist möglicherweise nicht die richtige Methode, um dies öffentlich zu tun, aber dies hat bei mir auf einer privaten Website funktioniert. :) :)


1

Es ist sehr einfach

function archiveRemove(any) {
    var click = $(any);
    var id = click.attr("id");
    swal.fire({
        title: 'Are you sure !',
           text: "?????",
           type: 'warning',
           showCancelButton: true,
           confirmButtonColor: '#3085d6',
           cancelButtonColor: '#d33',
           confirmButtonText: 'yes!',
           cancelButtonText: 'no'
    }).then(function (success) {
        if (success) {
            $('a[id="' + id + '"]').parents(".archiveItem").submit();
        }
    })
}

0
function del_confirm(msg,url)
        {
            if(confirm(msg))
            {
                window.location.href=url
            }
            else
            {
                false;
            }

        }



<a  onclick="del_confirm('Are you Sure want to delete this record?','<filename>.php?action=delete&id=<?<id> >')"href="#"></a>

0
<SCRIPT LANGUAGE="javascript">
function Del()
{
var r=confirm("Are you sure?")
if(r==true){return href;}else{return false;}
}
</SCRIPT>

Ihr Link dafür:

<a href='edit_post.php?id=$myrow[id]'> Delete</a>

0

Der Onclick-Handler sollte nach dem Funktionsaufruf false zurückgeben. Zum Beispiel.

onclick="ConfirmDelete(); return false;">


0

Ich denke, die einfachste unauffällige Lösung wäre:

Verknüpfung:

<a href="http://link_to_go_to_on_success" class="delete">Delete</a>

Javascript:

$('.delete').click(function () {
    return confirm("Are you sure?");
});

0
<a href="javascript:;" onClick="if(confirm('Are you sure you want to delete this product')){del_product(id);}else{ }" class="btn btn-xs btn-danger btn-delete" title="Del Product">Delete Product</a>


function del_product(id){
    $('.process').css('display','block');
    $('.process').html('<img src="./images/loading.gif">');
    $.ajax({
        'url':'./process.php?action=del_product&id='+id,
        'type':"post",
        success: function(result){
            info=JSON.parse(result);
            if(result.status==1){
            setTimeout(function(){
                    $('.process').hide();
                    $('.tr_'+id).hide();
                },3000);
                setTimeout(function(){
                    $('.process').html(result.notice);
                },1000);
            }else if(result.status==0){
                setTimeout(function(){
                    $('.process').hide();
                },3000);
                setTimeout(function(){
                    $('.process').html(result.notice);
                },1000);

                }
            }
        });
}

0

Hier ist ein weiteres einfaches Beispiel in reinem JS, das className verwendet und ein Ereignis daran bindet.

var eraseable =  document.getElementsByClassName("eraseable");

for (var i = 0; i < eraseable.length; i++) {
    eraseable[i].addEventListener('click', delFunction, false); //bind delFunction on click to eraseables
}

function delFunction(){        
     var msg = confirm("Are you sure?");      
     if (msg == true) { 
        this.remove(); //remove the clicked element if confirmed
    }   
  };
<button class="eraseable">
<img class="eraseable" src="http://zelcs.com/wp-content/uploads/2013/02/stackoverflow-logo-dumpster.jpg" style="width:100px;height:auto;">
Delete me</button>

<button class="eraseable">
<img class="eraseable" src="http://zelcs.com/wp-content/uploads/2013/02/stackoverflow-logo-dumpster.jpg" style="width:100px;height:auto;">
Delete me</button>

<button class="eraseable">
<img class="eraseable" src="http://zelcs.com/wp-content/uploads/2013/02/stackoverflow-logo-dumpster.jpg" style="width:100px;height:auto;">
Delete me</button>


0
<script>
function deleteItem()
{
   var resp = confirm("Do you want to delete this item???");
   if (resp == true) {
      //do something
   } 
   else {
      //do something
   }
}
</script>

Rufen Sie diese Funktion mit auf onClick


0

Für "Bestätigungsmeldung beim Löschen" verwenden Sie:

                       $.ajax({
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        url: "Searching.aspx/Delete_Student_Data",
                        data: "{'StudentID': '" + studentID + "'}",
                        dataType: "json",
                        success: function (data) {
                            alert("Delete StudentID Successfully");
                            return true;
                        }

0

Angularjs mit Javascript Delete Beispiel

HTML Quelltext

<button ng-click="ConfirmDelete(single_play.play_id)" type="submit" name="actiondelete" value="1"><img src="images/remove.png" alt="Delete"></button>

"single_play.play_id" ist eine beliebige Winkelvariable. Angenommen, Sie möchten während der Löschaktion einen beliebigen Parameter übergeben

Angularjs-Code im App-Modul

$scope.ConfirmDelete = function(yy)
        {
            var x = confirm("Are you sure you want to delete?");
            if (x) {
             // Action for press ok
                $http({
                method : 'POST',
                url : 'sample.php',
                headers: {'Content-Type': 'application/x-www-form-urlencoded'},
                data: $.param({ delete_play_id : yy})
                }).then(function (response) { 
                $scope.message = response.data;
                });
            }
            else {
             //Action for cancel
                return false;
            }
        } 

0

Es ist viel schwieriger, dies für ausgewählte Optionsfelder zu tun. Hier ist die Lösung:

<select onchange="if (this.value == 'delete' && !confirm('THIS ACTION WILL DELETE IT!\n\nAre you sure?')){this.value=''}">
    <option value=''> &nbsp; </option>
    <option value="delete">Delete Everything</option>
</select>

0

Ich benutze diesen Weg (in Laravel) -

<form id="delete-{{$category->id}}" action="{{route('category.destroy',$category->id)}}" style="display: none;" method="POST">
 @csrf
 @method('DELETE')
</form>

<a href="#" onclick="if (confirm('Are you sure want to delete this item?')) {
           event.preventDefault();
           document.getElementById('delete-{{$category->id}}').submit();
         }else{
           event.preventDefault();
         }">
  <i class="fa fa-trash"></i>
</a>
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.