Alert confirmation issue

Question

I have a button on which when the user clicks to delete project on the site a confirmation pops up , I am using alertify.js for this I have the button etc working however when clicking delete the confirmation box appears and automatically deletes project and vanishes before I can either click ok to confirm or cancel.. ?

here is the html

<button type="submit" class="btn btn-link btn-sm" Onclick="return ConfirmDelete();" style="margin:5px;"></button>

here is javascript code

 function ConfirmDelete()
{
   alertify.confirm("This is a confirm dialog", function (ev) {
        ev.preventDefault();
        alertify.success("You've clicked OK");
    }, function(ev) {
        ev.preventDefault();
        alertify.error("You've clicked Cancel");
    });
}

how can I prevent this from happening ?

Not sure which library or framework you're using but generally, if you use a button as a forms submit, you wouldn't use an onclick event on that button. This can lead to undesired behaviours. So maybe that may be your fault since your code seems to be pretty correct. — Aer0, Jan 16 '17 at 12:19

score 3 · Accepted Answer · answered Jan 16 '17 at 12:32

You can't prevent form submission in this case because custom confirmation is non-blocking asynchronous dialog. You can stop it however by always returning false and submitting form manually (programmatically) in case of Ok button press:

function ConfirmDelete(button) {
  alertify.confirm("This is a confirm dialog", function() {
    button.form.submit()
    // alertify.success("You've clicked OK", function() {
    //   button.form.submit()
    // });
  }, function() {
    alertify.error("You've clicked Cancel");
  });

  return false;
}

For this make sure to pass button reference to your function:

<button type="submit" onclick="return ConfirmDelete(this)">ConfirmDelete</button>

Alert confirmation issue

1 Answers1