How to display a confirmation dialog when clicking an a link

Question

I want this link to have a JavaScript dialog that asks the user    Are you sure  Y N       lt a href  delete php id 22  gt Link lt  a gt    If the user clicks    Yes     the link should load  if    No    nothing will happen   I know how to do that in forms  using onclick running a function that returns true or false  But how do I do this with an  lt a gt  link

User · Answer

Most browsers don t display the custom message passed to confirm     With this method  you can show a popup with a custom message if your user changed the value of any  lt input gt  field   You can apply this only to some links  or even other HTML elements in your page  Just add a custom class to all the links that need confirmation and apply use the following code    x000D   x000D    document  ready function     x000D    let unsaved   false  x000D       detect changes in all input fields and set the  unsaved  flag x000D        input   change      gt  unsaved   true   x000D       trigger popup on click x000D        dangerous-link   click function     x000D      if  unsaved  amp  amp   window confirm  Are you sure you want to nuke the world       x000D        return     user didn t confirm x000D        x000D         either there are no unsaved changes or the user confirmed x000D      window location href     this  data  destination    x000D        x000D      x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   x000D   x000D   lt input type  text  placeholder  Nuclear code here    gt  x000D   lt a data-destination  https   en wikipedia org wiki Boom  class  dangerous-link  gt  x000D      Launch nuke  x000D   lt  a gt  x000D   x000D   x000D    Try changing the input value in the example to get a preview of how it works

User · Answer

lt a href  delete php id 22  onclick    if    confirm  Continue       return false     gt Confirm OK  then goto URL  uses onclick    lt  a gt

User · Answer

This method is slightly different than either of the above answers if you attach your event handler using addEventListener  or attachEvent    function myClickHandler evt      var allowLink   confirm  Continue with link       if   allowLink        evt returnValue   false    for older Internet Explorer     if  evt preventDefault          evt preventDefault              return false          You can attach this handler with either   document getElementById  mylinkid   addEventListener  click   myClickHandler  false     Or for older versions of internet explorer   document getElementById  mylinkid   attachEvent  onclick   myClickHandler

User · Answer

Inline event handler  In the most simple way  you can use the confirm   function in an inline onclick handler    lt a href  delete php id 22  onclick  return confirm  Are you sure     gt Link lt  a gt    Advanced event handling  But normally you would like to separate your HTML and Javascript  so I suggest you don t use inline event handlers  but put a class on your link and add an event listener to it    lt a href  delete php id 22  class  confirmation  gt Link lt  a gt       lt script type  text javascript  gt      var elems   document getElementsByClassName  confirmation        var confirmIt   function  e            if   confirm  Are you sure     e preventDefault               for  var i   0  l   elems length  i  lt  l  i              elems i  addEventListener  click   confirmIt  false          lt  script gt    This example will only work in modern browsers  for older IEs you can use attachEvent    returnValue and provide an implementation for getElementsByClassName   or use a library like jQuery that will help with cross-browser issues   You can read more about this advanced event handling method on MDN   jQuery  I d like to stay far away from being considered a jQuery fanboy  but DOM manipulation and event handling are two areas where it helps the most with browser differences  Just for fun  here is how this would look with jQuery    lt a href  delete php id 22  class  confirmation  gt Link lt  a gt       lt  -- Include jQuery - see http   jquery com -- gt   lt script type  text javascript  gt          confirmation   on  click   function              return confirm  Are you sure              lt  script gt

User · Answer

jAplus  You can do it  without writing JavaScript code   lt head gt      lt script src   path to jquery js  type  text javascript  charset  utf-8  gt  lt  script gt      lt script src   path to jquery Aplus js  type  text javascript  charset  utf-8  gt  lt  script gt   lt  head gt   lt body gt          lt a href  delete php id 22  class  confirm  title  Are you sure   gt Link lt  a gt       lt  body gt    Demo page

User · Answer

I d suggest avoiding in-line JavaScript   var aElems   document getElementsByTagName  a     for  var i   0  len   aElems length  i  lt  len  i          aElems i  onclick   function             var check   confirm  Are you sure you want to leave             if  check    true                return true                    else               return false                        JS Fiddle demo   The above updated to reduce space  though maintaining clarity function   var aElems   document getElementsByTagName  a     for  var i   0  len   aElems length  i  lt  len  i          aElems i  onclick   function             return confirm  Are you sure you want to leave                JS Fiddle demo   A somewhat belated update  to use addEventListener    as suggested  by ba  megakapa  in the comments below    function reallySure  event        var message    Are you sure about that        action   confirm message    true   event preventDefault      var aElems   document getElementsByTagName  a     for  var i   0  len   aElems length  i  lt  len  i          aElems i  addEventListener  click   reallySure       JS Fiddle demo   The above binds a function to the event of each individual link  which is potentially quite wasteful  when you could bind the event-handling  using delegation  to an ancestor element  such as the following   function reallySure  event        var message    Are you sure about that        action   confirm message    true   event preventDefault       function actionToFunction  event        switch  event target tagName toLowerCase              case  a                reallySure event               break          default              break           document body addEventListener  click   actionToFunction     JS Fiddle demo   Because the event-handling is attached to the body element  which normally contains a host of other  clickable  elements I ve used an interim function  actionToFunction  to determine what to do with that click  If the clicked element is a link  and therefore has a tagName of a  the click-handling is passed to the reallySure   function   References    addEventListener    Conditional   ternary   operator  confirm    getElementsByTagName    onclick  if

User · Answer

You can also try this    lt a href    onclick  if  confirm  Delete selected item     return true  else event stopPropagation    event preventDefault       title  Link Title  gt      Link Text  lt  a gt

User · Answer

USING PHP  HTML AND JAVASCRIPT for prompting  Just if someone looking for using php  html and javascript in a single file  the answer below is working for me   i attached with the used of bootstrap icon  trash  for the link    lt a class  btn btn-danger  href   lt  php echo  delete php  amp var  var     gt   onclick  return confirm  Are you sure want to delete this      gt  lt span class  glyphicon glyphicon-trash  gt  lt  span gt  lt  a gt    the reason i used php code in the middle is because i cant use it from the beginning     the code below doesnt work for me -  echo   lt a class  btn btn-danger  href  delete php  amp var  var  onclick  return confirm  Are you sure want to delete this      gt  lt span class  glyphicon glyphicon-trash  gt  lt  span gt  lt  a gt      and i modified it as in the 1st code then i run as just what i need   I hope that can i can help someone inneed of my case

User · Answer

Just for fun  I m going to use a single event on the whole document instead of adding an event to all the anchor tags   document body onclick   function  e            Cross-browser handling     var evt   e    window event          target   evt target    evt srcElement          If the element clicked is an anchor     if   target nodeName      A                  Add the confirm box         return confirm   Are you sure                 This method would be more efficient if you had many anchor tags  Of course  it becomes even more efficient when you add this event to the container having all the anchor tags

[javascript] How to display a confirmation dialog when clicking an <a> link?

Examples related to javascript

Examples related to html

Examples related to dom-events