How to display confirmation dialog when clicking an <a> link using JavaScript / jQuery ?

Given <a> element and the task is to display the confirmation message when clicking the <a> link, with the help of JavaScript and jQuery.

Display confirmation dialog when clicking an <a> link using JavaScript

  • onclick Event: This event occurs when the user clicks on an element.

    Syntax:

    • In HTML:
      <element onclick="myScript">
    • In JavaScript:
      object.addEventListener("click", myScript);
    • In JavaScript, using the addEventListener() method:
      object.onclick = function() {myScript};
  • addEventListener() Method: This method adds an event handler to the document.

    Syntax:

    document.addEventListener(event, function, useCapture)

    Parameters:

    • event: This parameter is required. It specifies the string, the name of the event.
    • function: This parameter is required. It specifies the function to run when the event occurs. When the event occurs, an event object is passed as the first parameter to the function. The type depends on the specified event. For example, the “click” event belongs to the MouseEvent object.
    • useCapture: This parameter is optional. It specifies a boolean value which means whether the event should be executed in the capturing or in the bubbling phase.
      • true: The event handler is executed in the capturing phase.
      • false: The event handler is executed in the bubbling phase.

Example 1: This example adds a confirm() method to the link with onclick event. This will verify whether you want to proceed or not.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE HTML> 
<html
    <head
        <title
            Display a confirmation dialog when
            clicking an a tag link
        </title>
    </head
      
    <body style = "text-align:center;">
           
        <h1 style = "color:green;"
            GeeksForGeeks 
        </h1>
          
        <p id = "GFG_UP" style =
            "font-size: 15px; font-weight: bold;">
        </p>
          
        <a href="#" onclick="return confirm('Are you sure?')">
            Link
        </a>
          
        <br><br>
          
        <p id = "GFG_DOWN" style
            "color:green; font-size: 20px; font-weight: bold;">
        </p>
          
        <script>
            var el_up = document.getElementById("GFG_UP");
              
            el_up.innerHTML = 
                "Click on the LINK for further confirmation."; 
        </script
    </body
</html>                    

chevron_right


Output:

  • Before clicking on the button:
  • After clicking on the button:

Example 2: This example adds a class confirm to all link. After this, it adds the EventListener to the elements of that class, on onclick event. Then it calls a method to separately handle the confirm dialog.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE HTML> 
<html
    <head
        <title
            Display a confirmation dialog when
            clicking an a tag link
        </title>
    </head
      
    <body style = "text-align:center;">
           
        <h1 style = "color:green;"
            GeeksForGeeks 
        </h1>
          
        <p id = "GFG_UP" style =
            "font-size: 15px; font-weight: bold;">
        </p>
          
        <a href="#" class="confirm">Link</a>
          
        <br><br>
          
        <p id = "GFG_DOWN" style =
            "color:green; font-size: 20px; font-weight: bold;">
        </p>
          
        <script>
            var el_up = document.getElementById("GFG_UP");
                  
            el_up.innerHTML =
                    "Click on the LINK for further confirmation."; 
              
            var el = document.getElementsByClassName('confirm');
              
            var confirmThis = function (e) {
                if (!confirm('Are you sure?')) e.preventDefault();
            };
              
            for (var i = 0, l = el.length; i < l; i++) {
                el[i].addEventListener('click', confirmThis, false);
            }
        </script> 
    </body
</html>                    

chevron_right


Output:

  • Before clicking on the button:
  • After clicking on the button:

Display confirmation dialog when clicking an <a> link using jQuery

  • jQuery on() Method: This method adds one or more event handlers for the selected elements and child elements.

    Syntax:

    $(selector).on(event, childSelector, data, function, map)

    Parameters:

    • event: This parameter is required. It specifies one or more event(s) or namespaces to attach to the selected elements. In case of multiple event values, those are separated by space. Event must be a valid.
    • childSelector: This parameter is optional. It specifies that the event handler should only be attached to the defined child elements.
    • data: This parameter is optional. It specifies additional data to pass to the function.
    • function: This parameter is required. It specifies the function to run when the event occurs.
    • map: It specifies an event map ({event:func(), event:func(), …}) having one or more event to add to the selected elements, and functions to run when the events happens.

Example 1: This example adds a class confirm to the all link. After this, It adds the EventListener to the elements of that class, on onclick event. Then it calls the confirm dialog.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE HTML> 
<html
    <head
        <title
            Display a confirmation dialog when 
            clicking an a tag link
        </title>
          
        <script src =
        </script>
    </head
  
    <body style = "text-align:center;">
           
        <h1 style = "color:green;"
            GeeksForGeeks 
        </h1>
          
        <p id = "GFG_UP" style =
            "font-size: 15px; font-weight: bold;">
        </p>
          
        <a href="#" class="confirm">Link</a>
          
        <br><br>
          
        <p id = "GFG_DOWN" style
            "color:green; font-size: 20px; font-weight: bold;">
        </p>
          
        <script>
            $("#GFG_UP").
                text("Click on the LINK for further confirmation."); 
                  
            $('.confirm').on('click', function () {
                return confirm('Are you sure?');
            });
        </script
    </body
</html>                    

chevron_right


Output:

  • Before clicking on the button:
  • After clicking on the button:

Example 2: This example adds a confirm() method to the link with onclick event. This will verify whether you want to proceed or not.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE HTML> 
<html
    <head
        <title
            Display a confirmation dialog when 
            clicking an a tag link
        </title>
          
        <script src =
        </script>
    </head
      
    <body style = "text-align:center;"
      
        <h1 style = "color:green;"
            GeeksForGeeks 
        </h1>
          
        <p id = "GFG_UP" style
            "font-size: 15px; font-weight: bold;">
        </p>
          
        <a href="#" onclick="return confirm('Are you sure?')">
            Link
        </a>
          
        <br><br>
          
        <p id = "GFG_DOWN" style
            "color:green; font-size: 20px; font-weight: bold;">
        </p>
          
        <script>
            $("#GFG_UP").
                text("Click on the LINK for further confirmation."); 
        </script
    </body
</html>                    

chevron_right


Output:

  • Before clicking on the button:
  • After clicking on the button:


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.