How to show a confirm message before delete

Question

I want to get a confirm message on clicking delete  this maybe a button or an image   If the user selects  Ok  then delete is done  else if  Cancel  is clicked nothing happens    I tried echoing this when the button was clicked  but echoing stuff makes my input boxes and text boxes lose their styles and design

User · Answer

function del confirm msg url                        if confirm msg                                 window location href url                           else                               false                               lt a  onclick  del confirm  Are you Sure want to delete this record     lt filename gt  php action delete amp id  lt   lt id gt   gt    href     gt  lt  a gt

User · Answer

It can be simplify to this   lt button onclick  quot return confirm  Are you sure you want to delete     quot    gt

User · Answer

I think the simplest unobtrusive solution would be   Link    lt a href  http   link to go to on success  class  delete  gt Delete lt  a gt    Javascript       delete   click function          return confirm  Are you sure

User · Answer

This is how you would do it with unobtrusive JavaScript and the confirm message being hold in the HTML    lt a href   delete  class  delete  data-confirm  Are you sure to delete this item   gt Delete lt  a gt    This is pure vanilla JS  compatible with IE 9    var deleteLinks   document querySelectorAll   delete     for  var i   0  i  lt  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                      See it in action  http   codepen io anon pen NqdKZq

User · Answer

it is very simple and one line of code   lt a href     title  delete  class  delete  onclick  return confirm  Are you sure you want to delete this item    gt Delete lt  a gt

User · Answer

Here is another simple example in pure JS using className and binding event to it    x000D   x000D  var eraseable    document getElementsByClassName  eraseable    x000D   x000D  for  var i   0  i  lt  eraseable length  i      x000D      eraseable i  addEventListener  click   delFunction  false     bind delFunction on click to eraseables x000D    x000D   x000D  function delFunction            x000D       var msg   confirm  Are you sure           x000D       if  msg    true     x000D          this remove      remove the clicked element if confirmed x000D           x000D       x000D   lt button class  eraseable  gt  x000D   lt img class  eraseable  src  http   zelcs com wp-content uploads 2013 02 stackoverflow-logo-dumpster jpg  style  width 100px height auto   gt  x000D  Delete me lt  button gt  x000D   x000D   lt button class  eraseable  gt  x000D   lt img class  eraseable  src  http   zelcs com wp-content uploads 2013 02 stackoverflow-logo-dumpster jpg  style  width 100px height auto   gt  x000D  Delete me lt  button gt  x000D   x000D   lt button class  eraseable  gt  x000D   lt img class  eraseable  src  http   zelcs com wp-content uploads 2013 02 stackoverflow-logo-dumpster jpg  style  width 100px height auto   gt  x000D  Delete me lt  button gt  x000D   x000D   x000D

User · Answer

Practice   lt form name myform gt   lt input type button value  Try it now   onClick  if confirm  Format the hard disk     alert  You are very brave     else alert  A wise decision     gt   lt  form gt    Web Original   http   www javascripter net faq confirm htm

User · Answer

The onclick handler should return false after the function call  For eg   onclick  ConfirmDelete    return false   gt

User · Answer

var x   confirm  Are you sure you want to send sms     if  x      return true  else     return false

User · Answer

lt 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  gt Delete Product lt  a gt    lt  -- language  lang-js -- gt   lt script gt  function del product id           process   css  display   block            process   html   lt img src    images loading gif  gt           ajax            url     process php action del product amp 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                                      lt  script gt

User · Answer

var txt  var r   confirm  Press a button     if  r    true       txt    You pressed OK      else      txt    You pressed Cancel         x000D   x000D  var txt  x000D  var r   confirm  Press a button     x000D  if  r    true    x000D      txt    You pressed OK    x000D    else   x000D      txt    You pressed Cancel    x000D    x000D   x000D   x000D

User · Answer

I would like to offer the way I do this    lt form action   route  method  POST  gt   lt input type  hidden  name   method  value  DELETE  gt    lt input type  hidden  name   token  value  the token  gt   lt button type  submit  class  btn btn-link  onclick  if   confirm  Are you sure       return false    gt  lt span gt Delete lt  span gt  lt  button gt   lt  form gt

User · Answer

lt form onsubmit  return confirm  Are you sure        gt    works well for forms  Form-specific question  JavaScript Form Submit - Confirm or Cancel Submission Dialog Box

User · Answer

to set a conformation message when you delete something in php  amp  mysql     use this script code    lt script gt      function Conform Delete                return conform  Are You Sure Want to Delete            lt  script gt    use this html code    lt a onclick  return Conform Delete    href     gt delete lt  a gt

User · Answer

Using jQuery       delete-link   on  click   null  function            return confirm  Are you sure

User · Answer

I m useing this way  in laravel -   lt form id  delete-   category- gt id    action    route  category destroy   category- gt id     style  display  none   method  POST  gt    csrf   method  DELETE    lt  form gt    lt a href     onclick  if  confirm  Are you sure want to delete this item                  event preventDefault               document getElementById  delete-   category- gt id     submit              else             event preventDefault                gt     lt i class  fa fa-trash  gt  lt  i gt   lt  a gt

User · Answer

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           lt img src  deleteicon png  onclick  confirmDelete    gt    You might want to pass some data with confirmDelete to determine which entry is to be deleted

User · Answer

Try this  It works for me     lt a href  delete methode link  onclick  return confirm  Are you sure you want to Remove      gt Remove lt  a gt

User · Answer

HTML    lt a href     class  delete  data-confirm  Are you sure to delete this item   gt Delete lt  a gt    Using jQuery       delete   on  click   function  e        e preventDefault         var choice   confirm   this  attr  data-confirm          if  choice            window location href     this  attr  href

User · Answer

If you are interested in some quick pretty solution with css format done  you can use SweetAlert  x000D   x000D    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           then isConfirmed   gt             if isConfirmed                  file   addClass  isDeleted              swal  Deleted     Your imaginary file has been deleted     success                             x000D  html   zoom  0 7      little  hack  to make example visible in stackoverflow snippet preview    body  gt  p   font-size  32px     delete   cursor  pointer  color   00A    isDeleted   text-decoration line-through   x000D   lt script src  https   code jquery com jquery-2 1 3 min js  gt  lt  script gt   lt script src  https   unpkg com sweetalert dist sweetalert min js  gt  lt  script gt   lt link rel  stylesheet  href  http   t4t5 github io sweetalert dist sweetalert css  gt    lt p class  file  gt File 1  lt span class  delete  gt  delete  lt  span gt  lt  p gt  x000D   x000D   x000D

User · Answer

lt script gt  function deleteItem        var resp   confirm  Do you want to delete this item          if  resp    true            do something          else           do something         lt  script gt    call this function using onClick

User · Answer

lt SCRIPT LANGUAGE  javascript  gt  function Del     var r confirm  Are you sure    if r  true  return href  else return false      lt  SCRIPT gt    your link for it    lt a href  edit post php id  myrow id   gt  Delete lt  a gt

User · Answer

For  confirmation message on delete  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

User · Answer

HTML   lt input onclick  return myConfirm     type  submit  name  deleteYear  class  btn btn-danger  value  Delete  gt    Javascript   lt script gt  function myConfirm       var result   confirm  Want to delete       if  result  true       return true      else      return false

User · Answer

lt 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  gt Delete Product lt  a gt    function del product id           process   css  display   block            process   html   lt img src    images loading gif  gt           ajax            url     process php action del product amp 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

User · Answer

Its very simple  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

User · Answer

function ConfirmDelete       var x   confirm  Are you sure you want to delete       if  x        return true    else     return false       lt input type  button  onclick  ConfirmDelete    gt

User · Answer

It is much harder to do it for select option boxes  Here is the solution    lt select onchange  if  this value     delete   amp  amp   confirm  THIS ACTION WILL DELETE IT  n nAre you sure     this value      gt       lt option value    gt   amp nbsp   lt  option gt       lt option value  delete  gt Delete Everything lt  option gt   lt  select gt

User · Answer

improving on user1697128  because I cant yet comment on it    lt script gt      function ConfirmDelete               var x   confirm  Are you sure you want to delete           if  x            return true        else         return false         lt  script gt        lt button Onclick  return ConfirmDelete     type  submit  name  actiondelete  value  1  gt  lt img src  images action delete png  alt  Delete  gt  lt  button gt    will cancel form submission if cancel is pressed

User · Answer

Write this in onclick event of the button   var result   confirm  Want to delete     if  result          Logic to delete the item

User · Answer

You can better use as follows    lt a href  url to delete  onclick  return confirm  Are you sure you want to delete this item      gt Delete lt  a gt

User · Answer

I know this is old  but I needed an answer and non of these but alpesh s answer worked for me and wanted to share with people that might had the same problem    lt script gt      function confirmDelete url        if  confirm  Are you sure you want to delete this               window open url         else           false                  lt  script gt    Normal version    lt input type  button  name  delete  value  Delete  onClick  confirmDelete  delete php id 123 amp title Hello    gt    My PHP version    deleteUrl    delete php id     id    amp title     title  echo   lt input type   button   name   delete   value   Delete   onClick   confirmDelete      deleteUrl         gt      This might not be the correct way of doing it publicly but this worked for me on a private site

User · Answer

Angularjs With Javascript Delete Example   html code    lt button ng-click  ConfirmDelete single play play id   type  submit  name  actiondelete  value  1  gt  lt img src  images remove png  alt  Delete  gt  lt  button gt     single play play id  is any angularjs variable suppose you want to pass any parameter during the delete action   Angularjs code inside the app module    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

[javascript] How to show a confirm message before delete?

Examples related to javascript

Examples related to html