javascript - registro - ¿Cómo mostrar un mensaje de confirmación antes de eliminar?

mensaje de confirmacion para eliminar un registro

Question

Deseo obtener un mensaje de confirmación al hacer clic en Eliminar (esto quizás sea un botón o una imagen). Si el usuario selecciona '' Ok '', se borrará, de lo contrario, si se hace clic en '' Cancel '', no pasa nada.

Traté de hacer eco de esto cuando se hizo clic en el botón, pero hacer eco de cosas hace que mis cuadros de entrada y cuadros de texto pierdan sus estilos y diseño.

Answer 1

Angularjs con el ejemplo de Javascript Delete

código 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" es cualquier variable angularjs suponga que desea pasar cualquier parámetro durante la acción de eliminación

Código Angularjs dentro del módulo de la aplicación

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

Answer 2

Aquí hay otro ejemplo simple en JS puro que usa className y evento vinculante.

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/-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/-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/-logo-dumpster.jpg" style="width:100px;height:auto;">
Delete me</button>

Answer 3

Así es como lo harías con JavaScript discreto y el mensaje de confirmación retenido en el HTML.

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

Esto es puro vainilla JS, compatible con 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'');
      }
  });
}

Véalo en acción: http://codepen.io/anon/pen/NqdKZq

Answer 4

Creo que la solución más simple y discreta sería:

Enlazar:

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

Javascript:

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

Answer 5

El controlador onclick debería devolver falso después de la llamada a la función. Por ej.

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

Answer 6

Es mucho más difícil hacerlo para seleccionar cuadros de opción. Aquí está la solución:

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

Answer 7

Escribe esto en el evento onclick del botón:

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

Answer 8

HTML:

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

Usando jQuery:

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

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

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

Answer 9

Me gustaría ofrecer la forma en que hago esto:

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

Answer 10

Para el "mensaje de confirmación al borrar", use:

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

Answer 11

Práctica

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

Original web:

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

Answer 12

Prueba esto. Esto funciona para mi

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

Answer 13

Puede usar mejor de la siguiente manera

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

Answer 14

Sé que esto es viejo, pero necesitaba una respuesta y no de estas, pero la respuesta de alpesh funcionó para mí y quise compartirla con personas que podrían tener el mismo problema.

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

Versión normal:

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

Mi versión de PHP:

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

Esta podría no ser la forma correcta de hacerlo públicamente, pero esto funcionó para mí en un sitio privado. :)

Answer 15

Si está interesado en alguna solución bastante rápida con el formato CSS hecho, puede usar 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  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>

Answer 16

Usando jQuery:

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

Answer 17

establecer un mensaje de conformación cuando eliminas algo en php y mysql ...

usa este código de script:

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

usa este código html:

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

Answer 18

mejorando en user1697128 (porque aún no puedo comentar sobre él)

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

cancelará el envío del formulario si se presiona cancelar

Answer 19

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

                }
            }
        });
}

Answer 20

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

su enlace para esto:

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

Answer 21

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

Answer 22

<form onsubmit="return confirm(''Are you sure?'');" />

funciona bien para formularios. Pregunta específica del formulario: Envío de un formulario de JavaScript - Confirmar o cancelar el cuadro de diálogo de envío

Answer 23

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

llama a esta función usando onClick

Answer 24

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


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

Answer 25

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()">

Es posible que desee pasar algunos datos con confirmDelete para determinar qué entrada se va a eliminar

Answer 26

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>

Answer 27

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

Answer 28

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