Как показать сообщение подтверждения перед удалением?

Question

Как показать сообщение подтверждения перед удалением?

Я хочу получить подтвердить при нажатии "удалить" (это может быть кнопка или картинка). Если пользователь выбирает 'Ok 'тогда удаление сделано, иначе если'Cancel' нажатии ничего не происходит.

Я попытался повторить это, когда кнопка была нажата, но эхо вещи делает мои поля ввода и текстовые поля теряют свои стили и дизайн.

527 28

javascript html

28 ответов:

Comments

Ничего не найдено.

Ved · Accepted Answer · 2015-02-24 16:52:04

записать onclick событие кнопки:
var result = confirm("Want to delete?");
if (result) {
    //Logic to delete the item
}

Raghav Rach · Accepted Answer · 2014-03-16 02:25:47

вы можете лучше использовать следующим образом
 <a href="url_to_delete" onclick="return confirm('Are you sure you want to delete this item?');">Delete</a>

DevAntoine · Accepted Answer · 2016-05-13 11:58:29

вот как вы это сделаете с ненавязчивым JavaScript и подтверждающим сообщением, удерживаемым в HTML.
<a href="/delete" class="delete" data-confirm="Are you sure to delete this item?">Delete</a>
это чистая ваниль JS, совместимая с 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');
      }
  });
}
смотрите его в действии:http://codepen.io/anon/pen/NqdKZq

user1697128 · Accepted Answer · 2013-07-08 12:45:51

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


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

Shuhad zaman · Accepted Answer · 2015-11-14 23:09:11

попробуйте это. Это работает для меня
 <a href="delete_methode_link" onclick="return confirm('Are you sure you want to Remove?');">Remove</a>

Rudolf Rein · Accepted Answer · 2013-11-30 23:54:28

улучшение на user1697128 (потому что я пока не могу это прокомментировать)
<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>
отменит отправку формы, если нажать кнопку Отмена

julionc · Accepted Answer · 2015-01-14 03:25:02

HTML:

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

С помощью jQuery:

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

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

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

Ciro Santilli 新疆改造中心六四事件法轮功 · Accepted Answer · 2017-05-23 14:54:59

<form onsubmit="return confirm('Are you sure?');" />
хорошо работает для форм. Вопрос по форме:форма JavaScript отправить-подтвердить или отменить отправку диалоговое окно

zeros-and-ones · Accepted Answer · 2017-12-12 20:45:46

Я хотел бы предложить способ, которым я делаю это:

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

Buksy · Accepted Answer · 2016-09-07 16:10:29

Если вас интересует какое-то быстрое красивое решение с форматом css, вы можете использовать SweetAlert

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

himos · Accepted Answer · 2017-10-16 14:39:44

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

KingRider · Accepted Answer · 2015-11-14 23:16:57

практика

<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

alpesh · Accepted Answer · 2013-09-20 09:49:42

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>

Apeli · Accepted Answer · 2013-11-11 15:17:18

С помощью jQuery:

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

emotality · Accepted Answer · 2015-02-08 01:59:57

Я знаю, что это старый, но мне нужен был ответ и не из них, но alpeshответ работал для меня и хотел поделиться с людьми, которые могли бы иметь ту же проблему.
<script>    
function confirmDelete(url) {
    if (confirm("Are you sure you want to delete this?")) {
        window.open(url);
    } else {
        false;
    }       
}
</script>
нормальный вариант:
<input type="button" name="delete" value="Delete" onClick="confirmDelete('delete.php?id=123&title=Hello')">
моя версия PHP:
$deleteUrl = "delete.php?id=" .$id. "&title=" .$title;
echo "<input type=\"button\" name=\"delete\" value=\"Delete\" onClick=\"confirmDelete('" .$deleteUrl. "')\"/>";
это может быть не правильный способ сделать это публично, но это сработало для меня на частном сайте. :)

ashik · Accepted Answer · 2016-05-10 10:08:33

чтобы установить сообщение о конформации, когда вы удаляете что-то в php & mysql...

используйте этот код скрипта:
<script>
    function Conform_Delete()
    {
       return conform("Are You Sure Want to Delete?");
    }
</script>
используйте этот html код:
<a onclick="return Conform_Delete()" href="#">delete</a>

Azat · Accepted Answer · 2014-01-23 07:15:33

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

ваша ссылка на него:

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

Amit · Accepted Answer · 2014-09-18 08:23:44

обработчик onclick должен возвращать false после вызова функции. Например.

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

Cookalino · Accepted Answer · 2015-07-22 13:59:54

Я думаю, что самым простым ненавязчивым решением было бы:

ссылки:
<a href="http://link_to_go_to_on_success" class="delete">Delete</a>
Javascript:
$('.delete').click(function () {
    return confirm("Are you sure?");
});

xahoigiaitri · Accepted Answer · 2015-11-14 23:08:28

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

                }
            }
        });
}

Arun Sharma · Accepted Answer · 2016-05-13 12:39:54

вот еще один простой пример в чистом JS с использованием className и привязки события к нему.

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>

Pranav V R · Accepted Answer · 2016-05-23 15:45:57

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

вызовите эту функцию с помощью onClick

Arvind Upadhyay. · Accepted Answer · 2016-09-07 15:40:18

для "подтверждения сообщения об удалении" используйте:

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

Rijo · Accepted Answer · 2016-12-08 14:22:14

В AngularJS С Примерами На JavaScript Удалить

HTML-код
<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 " - это любая переменная angularjs предположим, что вы хотите передать любой параметр во время действия удаления

код Angularjs внутри модуля приложения
$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;
            }
        } 

Tarik · Accepted Answer · 2018-01-08 09:41:51

это гораздо сложнее сделать для выбора опции коробки. Вот решение:
<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>

gaurav daxini · Accepted Answer · 2018-05-14 14:14:47

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

Shaneesh P · Accepted Answer · 2017-05-29 09:05:50

var x = confirm("Are you sure you want to send sms?");
if (x)
    return true;
else
    return false;

Somesh Mukherjee · Accepted Answer · 2012-02-04 09:08:26

function confirmDelete()
{
var r=confirm("Are you sure you want to delte this image");
if (r==true)
{
//User Pressed okay. Delete

}
else
{
//user pressed cancel. Do nothing
    }
 }
<img src="deleteicon.png" onclick="confirmDelete()">
вы можете передать некоторые данные с confirmDelete, чтобы определить, какая запись должна быть удалена