#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2007
    Posts
    34
    Rep Power
    8

    Continue or cancel navigation with button


    Hi all,

    I am 100% new to JS, and could use a little help.

    I have a page where, with links, a user can either:

    1) Edit their data
    2) Delete their data

    Each link goes to a different page, of course.

    The issue is, I want to be able to offer them the chance to cancel their action if they click on Delete. For example, when they click on the delete link, an alert would be shown saying: Warning: This will delete your information!, followed by an OK (or continue) button and a cancel button, to allow them to stay on the page without deleting their data.

    I was told by one person to use beforeunload, however, that won't work because of the EDIT link. So I need to figure out how to add this specifically to the DELETE link.

    Any help would be appreciated!

    P.s., I would not be against using buttons in place of html links, I simply don't know how to code the buttons to do what I need.
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,165
    Rep Power
    184
    This is a simple inline approach; using "return confirm()":

    Code:
    <a href="deleteIt.php" onclick="return confirm('Are You Sure You Want To Delete This Data?')">Delete</a>
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2013
    Posts
    26
    Rep Power
    0
    Edit: Oops, didn't see you there web_loone08. Jax2: there's your answer.

    Have a look at the confirm(); dialog: https://developer.mozilla.org/en-US/docs/DOM/window.confirm

    To utilize this, point your link at a JavaScript function which produces the confirm dialog and then redirects the user to the delete page if they click ok.

    JavaScript gets a bad rap amongst developers, but I think it's quite a useful and interesting language. Have fun in your learning.

    - Null
  6. #4
  7. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,165
    Rep Power
    184
    Originally Posted by null.if.ied
    Edit: Oops, didn't see you there web_loone08.
    No worries Null

    @Jax2, here is an example of using DOM; instead of using inline JavaScript. It's just a more modern and beneficial approach, to do away with inline events. The code below will tell each of the links; that are within a span tag; that's surrounding your delete links; to display a confirm prompt, before allowing the link to proceed to the delete page.

    Code:
    <script>
    
    function falsify()
    {
    var totalLinks = document.getElementById("delete_links").getElementsByTagName("a");
    for (i=0;i<totalLinks.length;i++) {
      totalLinks[i].onclick = function() {
       return false; 
      }
     }
    }
    
    function toDeleteOrNot()
    {
    var totalLinks = document.getElementById("delete_links").getElementsByTagName("a");
    for (i=0;i<totalLinks.length;i++) {
    totalLinks[i].onclick = function() {
    var that = this;
    var deleteIt = confirm("Are You Sure You Want To " + that.innerHTML + "?");
       if (deleteIt) {
        return true;
       }
       else {
        return false;
       }
      }
     }
    }
    
    document.onreadystatechange = function(){
     if (document.readyState=="interactive") {
      falsify();
     }
     else if (document.readyState=="complete") {
      toDeleteOrNot();
     }
    }
    
    </script>
    
    <span id="delete_links">
    
    <a href="deleteIt.php?data=1">Delete Data 1</a>
    
    <br/>
    <br/>
    <br/>
    
    <a href="deleteIt.php?data=2">Delete Data 2</a>
    
    <br/>
    <br/>
    <br/>
    
    <a href="deleteIt.php?data=3">Delete Data 3</a>
    
    </span>
    Just something to think about; I should have posted that earlier (especially since your new to JavaScript); that using inline JavaScript has pretty much become depreciated. You can still use it, but it just isn't a common practice.

    And... this version, is even simpler; all you have to do..., is give your link a class name of "delete" and once those links (with a class name of "delete") are clicked; the end user will get a confirm prompt.

    Code:
    <script>
    
    function falsify()
    {
    var totalLinks = document.getElementsByTagName("body")[0].getElementsByTagName("a");
    for (i=0;i<totalLinks.length;i++) {
     if (totalLinks[i].className=="delete") {
       totalLinks[i].onclick = function() {
        return false; 
       }
      }
     }
    }
    
    function toDeleteOrNot()
    {
    var totalLinks = document.getElementsByTagName("body")[0].getElementsByTagName("a");
    for (i=0;i<totalLinks.length;i++) {
    if (totalLinks[i].className=="delete") {
    totalLinks[i].onclick = function() {
    var that = this;
    var deleteIt = confirm("Are You Sure You Want To " + that.innerHTML + "?");
        if (deleteIt) {
         return true;
        }
        else {
         return false;
        }
       }
      }
     }
    }
    
    document.onreadystatechange = function(){
     if (document.readyState=="interactive") {
      falsify();
     }
     else if (document.readyState=="complete") {
      toDeleteOrNot();
     }
    }
    
    </script>
    
    <a href="edit.php?data=1">Edit Data 1</a> | 
    
    <a class="delete" href="deleteIt.php?data=1">Delete Data 1</a>
    
    <br/>
    <br/>
    <br/>
    
    <a href="edit.php?data=2">Edit Data 2</a> | 
    
    <a class="delete" href="deleteIt.php?data=2">Delete Data 2</a>
    
    <br/>
    <br/>
    <br/>
    
    <a href="edit.php?data=3">Edit Data 3</a> | 
    
    <a class="delete" href="deleteIt.php?data=3">Delete Data 3</a>
    Last edited by web_loone08; February 14th, 2013 at 11:09 AM. Reason: Added an even better version of my code example.

IMN logo majestic logo threadwatch logo seochat tools logo