jQuery - html link contains confirm(), read selected option from script

Question

My html page has a submit button created as follows:

<input type="submit" name="submit" value="Remove" class="remove" onclick="return window.confirm( Are you sure you want to remove this?)">

When a user clicks this button I need to detect if they select OK or Cancel.

I'm trying to do this using the following which is running in my js script.

$("body").on('click', '.remove', function(e) {
    e.preventDefault()
    
    var _confirm_function = window.confirm;
    window.confirm = function() {
    
        var confirmed = _confirm_function.apply( window, arguments );
        console.log ( confirmed )
        
        if ( confirmed !== true ) {
            console.log ( "user pressed cancel: Some cleanup");
            return false
            
        } else {
            console.log ( "user pressed ok: Do tasks");
        }
    }
    
})

When the page is loaded this doesn't seem to fire on the first click of the button. The second click of the button it works, but even if it returns false it carries on through the script and doesn't return false. Subsequent clicks of the button seem to be firing multiple times.

I need to have this run as soon as the button is clicked, and if Cancel is selected it should stop and not do anything further.

Is there any way to do this ?

Thanks

Answer 1

Assuming your submit button (whose name needs to NOT be submit), is in a form

$(() => { // page load
  const $button = $('[name=submit]'); // NEVER call anything submit in a form
  const $form = $button.closest('form')
  $button.prop('name', 'subbut');
  $button.prop('onclick', null); // remove confirm
  $form.on('submit', (e) => {
    const confirmed = confirm('Are you sure you want to remove this?');
    if (confirmed) {
      console.log("user pressed ok: Do tasks");
    } else {
      console.log("user pressed cancel: Some cleanup");
      e.preventDefault();
    }
  });

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<form>
  <input type="submit" name="submit" value="Remove" class="remove" onclick="return window.confirm('Are you sure you want to remove this?')">
</form>

If NOT in a form, make it a button:

$(() => { // page load
  const $button = $('[name=submit]'); // NEVER call anything submit in a form
  $button.prop('name', 'subbut');
  $button.prop('onclick', null); // remove confirm
  $button.type='button'
  $button.on('click', (e) => {
    const confirmed = confirm('Are you sure you want to remove this?');
    if (confirmed) {
      console.log("user pressed ok: Do tasks");
    } else {
      console.log("user pressed cancel: Some cleanup");
    }
  });

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <input type="submit" name="submit" value="Remove" class="remove" onclick="return window.confirm('Are you sure you want to remove this?')">