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.

Shyam K.
quelle

Antworten:

329

Schreiben Sie dies im onclickFalle der Schaltfläche:

var result = confirm("Want to delete?");
if (result) {
    //Logic to delete the item
}
Ved
quelle
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>
Raghav Rach
quelle
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

DevAntoine
quelle
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()">
user1697128
quelle
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>
Shuhad Zaman
quelle
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>
Mohammed Muzammil
quelle
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

Jaxx0rr
quelle
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>
Nullen und Einsen
quelle
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;
  }
}

nazmulhaqued
quelle
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');
    }
});
julionc
quelle
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>
himos
quelle
3

Trainieren

<form name=myform>
<input type=button value="Try it now" 
onClick="if(confirm('Format the hard disk?'))
alert('You are very brave!');
else alert('A wise decision!')">
</form>

Web-Original:

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

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

Buksy
quelle
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>
Ashik
quelle
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!";
}

gauravbhai daxini
quelle
1

Verwenden von jQuery:

$(".delete-link").on("click", null, function(){
        return confirm("Are you sure?");
    });
Apeli
quelle
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. :) :)

Emotionalität
quelle
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();
        }
    })
}
Amir Karim
quelle
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>
alpesh
quelle
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>
Azat
quelle
0

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

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

Amit
quelle
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?");
});
Cookalino
quelle
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);

                }
            }
        });
}
xahoigiaitri
quelle
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>

Arun Sharma
quelle
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

Pranav VR
quelle
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;
                        }
Arvind Upadhyay.
quelle
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;
            }
        } 
Rijo
quelle
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>
Tarik
quelle
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>
Shamsul Huda
quelle