Silmeden önce onay mesajı nasıl gösterilir?


204

Sil'i tıklatmak için bir onay mesajı almak istiyorum (bu belki bir düğme veya resim). Kullanıcı ' Ok' seçeneğini seçerse silme işlemi yapılır, ' Cancel' tıklanırsa hiçbir şey olmaz.

Düğmeye tıklandığında yankılanmayı denedim, ancak yankılama giriş kutuları ve metin kutuları tarzlarını ve tasarımlarını kaybediyor.

Yanıtlar:


332

onclickDüğme durumunda şunu yazın :

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

parlak cevap! kısa, hassas ve verimli çalışıyor
John

Deneyim sahibi olmayan herhangi bir JavaScript kullanıcısı için kod satırlarınız hiçbir şey ifade etmez, örnek sonuçsuz ve kafa karıştırıcı görünüyor. Yine de, bu iyi bir cevap.
Samuel Ramzan

Cevabınıza bazı detaylar eklemeniz gerektiğini düşünüyorum. Kodu neden kafa bölümüne veya harici bir dosyaya yazmak yerine düğmenin içine yerleştiriyorsunuz? Bu çok genel bir işlevdir ve programcı birkaç düğme için birkaç kez kullanmak isteyebilir, tek bir düğmenin içine
yazmam

288

Aşağıdaki gibi daha iyi kullanabilirsiniz

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

2
Bu, iş parçacığında yukarı doğru olmalıdır. Basit, hızlı, etkili. Sadece mükemmel bir iş çıkarıyor.
Mart'ta DonExo

Çok tehlikeli! Javascript kapatılmışsa ne olur? Veya bir örümcek / arama botu bu sayfayı okursa? Daha sonra tüm bağlantıları takip eder ve her şeyi siler! Bazı tarayıcı eklentileri de önbelleğe almak için bir sayfadaki tüm bağlantıları izler. ASLA bu şekilde yapmayın! Silme işlemleri hiçbir zaman bir GET isteği olmamalıdır.
Daniele Testa

1. sıradaki yanıttan daha az tehlikeli değildir, JavaScript kapalıysa herhangi bir JavaScript tehlikelidir. JavaScript'in açılması veya kapatılması kullanıcının kişisel seçimidir, JavaScript kapatılırsa, kullanıcının herhangi bir web sitesinde herhangi bir düğmeye basmamasını daha iyi bilmesi gerekir. Harika bir alternatif olarak her zaman sunucu tarafı doğrulaması vardır.
Samuel Ramzan

53

Bu, göze batmayan JavaScript ve HTML'de tutulan onay mesajıyla böyle yapılır.

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

Bu, IE 9+ ile uyumlu saf vanilya JS'dir:

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

Uygulamaya bakın: http://codepen.io/anon/pen/NqdKZq


Bu mükemmel çalışıyor, ancak yalnızca ilk düğme için çalışıyor. Ya bunlardan 20 veya daha fazlasını beğenirsek? Teşekkürler!
emotality

1
Haklısın, bunun nedeni sadece ilk elemanla eşleşen querySelector. Cevabı düzenledim ve bunun yerine querySelectorAll kullanmak için kod kalemini çatalladım.
DevAntoine

Bu örnek de JavaScript devre dışı ile çalışmak için düzenlenmiş olsaydı serin href="https://stackoverflow.com/delete"olurdu , örneğin yeterli olacağını düşünüyorum. Veya form gönderme örneği.
Ciro Santilli 法轮功 冠状 病 六四 事件 法轮功

1
@ CiroSantilli .p 文件 六四 事件 法轮功 event.preventDefault () işlevi sayesinde durum zaten böyledir. Hash karakterini bir url ile değiştirebilirsiniz, tetiklenmez. Ancak, JavaScript devre dışı bırakılırsa bağlantı beklendiği gibi çalışır.
DevAntoine

1
@CiroSantilli 法轮功 文件 六四 事件 法轮功 Buyrun;)
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()">

Sadece 1 dönüş noktasına sahip olmanın daha iyi olduğunu düşünüyorum. bu yüzden tercih ederim
jedi

17
Veya sadece return confirm("…"). Boolean ve sonra if / else içine dallanan bir değişken atamanıza gerek yoktur.
slhck

16

Bunu dene. Benim için çalışıyor

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

1
Güzel ve verimli.
Samuel Ramzan

14

çok basit ve bir satır kod

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

Kabul edilen anwer'ın hemen altında böyle bir cevap var gibi görünüyor.
şapka

12

user1697128 üzerinde iyileştirme (çünkü henüz yorum yapamam)

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

iptal basılırsa form gönderilmesini iptal eder


9

Bunu yapma şeklimi sunmak istiyorum:

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

1
Bu güzel. Zaten birden çok düğmeyle kurulmuş bir formum vardı ve yalnızca onclick="if (!confirm('Are you sure?')) { return false }"mevcut <input ... name = "Delete"> öğesine eklemem gerekiyordu ve işe yaradı. Teşekkür ederim.
Anthony Petrillo

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>

JQuery kullanma:

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

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

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

DevAntoines yanıtının iyi bir jQuery uyarlaması ( stackoverflow.com/a/19973570/1337887 ). Ancak, biraz daha genel bir yaklaşım, "$ ('. Delete')" yerine "$ ('A [data-confirm]')" kullanmak olacaktır. Bu şekilde, bir silme sınıfına sahip olmak için düğmelere ihtiyacınız yoktur, bunun yerine yalnızca veri onaylama özniteliğini entegre edebilirsiniz.
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

Eğer css formatında yapılan bazı hızlı güzel bir çözüm ile ilgileniyorsanız, SweetAlert kullanabilirsiniz

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

php & mysql bir şey sildiğinizde bir konformasyon mesajı ayarlamak için ...

bu kod kodunu kullanın:

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

bu html kodunu kullanın:

<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

JQuery kullanma:

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

1

Bunun eski olduğunu biliyorum, ama bir cevaba ihtiyacım vardı ve bunlardan birine ihtiyacım yoktu ama alpesh'in yanıtı benim için çalıştı ve aynı sorunu olan insanlarla paylaşmak istedi.

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

Normal sürüm:

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

PHP sürümüm:

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

Bu, herkese açık olarak yapmanın doğru yolu olmayabilir, ancak bu benim için özel bir sitede çalıştı. :)


1

Çok basit

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>

bunun için bağlantınız:

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

0

Onclick işleyicisi işlev çağrısından sonra false değerini döndürmelidir. Örneğin.

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


0

Bence en basit mütevazi çözüm:

Bağlantı:

<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

Saf JS'de className ve bağlama olayını kullanan başka bir basit örnek.

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>

kullanarak bu işlevi çağır onClick


0

"Silme işleminde onay mesajı" için şunları kullanın:

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

Javascript ile Angularjs Silme Örneği

HTML Kodu

<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" silme işlemi sırasında herhangi bir parametreyi iletmek istediğinizi varsayalım.

Uygulama modülünün içindeki Angularjs kodu

$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

Belirli seçenek kutuları için bunu yapmak çok daha zordur. İşte çözüm:

<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

Bu şekilde kullanıyorum (laravel'de) -

<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>
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.