CODEWITHSUNDEEP
javascriptjqueryhtml
Brad
Brad

Reputation: 12272

Javascript confirm, capturing the user selection

There is a piece of third-party add-on implemented into a website that prompts the user to confirm before deleting.

confirmDelete: function (event) {
    var go_ahead = confirm("Are you sure you want to delete this draft? This action cannot be undone.");
    if (go_ahead) {
        return;
    } else {
        event.preventDefault();
    }
}

In my own js file, I want to find out if the user clicked "Cancel" or "OK".

I can tell when the user is prompted with the confirm window (by them clicking the delete button), but I am unable to figure out if the user clicked Cancel or OK.

I want to keep this code separate as the add-on gets updated regularly.

$('button[name="delete"]').on('click', function(event) {
    console.log('delete btn clicked');
    console.log(event);
});

I went thru the contents of the event in my console but nothing stuck out at me.

Upvotes: 3

Views: 135

Answers (2)

Yogi
Yogi

Reputation: 7229

Another Alternative

The selected answer will not work if the widget assigns an event listener to the button. And this seems very likely based on the code provided. It will instead display two confirmation dialogs, which is quite confusing.

As a workaround, OP might override the window confirm method. The replacement method could intercept both the message and the result. And while I wouldn't advocate overriding native methods, it is a pragmatic solution that I've used successfully with legacy systems.

Run the snippet to try

var confirm2 = window.confirm;

window.confirm = function(message) {

  var result = confirm2(message);

  debug.innerHTML += 'confirm: ' + message + '\nresult = ' + result + '\n';

  return result;

}


// Simulate 3rd Party Widget
var widget = (function() {

  var methods = {
    confirmDelete: function(event) {
      var go_ahead = confirm("Are you sure you want to delete this draft? This action cannot be undone.");
      if (go_ahead) {
        return;
      } else {
        event.preventDefault();
      }
    }
  }

  document.getElementsByName('delete')[0].addEventListener('click', methods.confirmDelete);

  return methods;

})();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button name="delete">Delete</button>
<xmp id="debug"></xmp>

Upvotes: 1

Dave Newton
Dave Newton

Reputation: 160261

Return the value of calling confirm to your onClick handler, e.g.,

var SomeObject = {
  confirmDelete: function () {
    return confirm("Are you sure you want to delete this draft? This action cannot be undone.");
  }
};

Then:

$('button[name="delete"]').on('click', function(event) {
    var confirmed = SomeObject.confirmDelete();
    if (!confirmed) {
        event.preventDefault();
        return;
    }

    // etc...
});

I removed event twiddling from the confirmation function. This keeps it close to the actual event, and seems more canonical jQuery. It improves readability and simplifies testing.

Upvotes: 2

Related Questions