Question 286820 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

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

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

Tags:

2

Answers


  1. 0

    Your code seems very confused, window.confirm() itself already returns a boolean indicating which button was pressed. Why not use that? Something like this:

    HTML

    <input type="submit" onclick="removeSomething();">

    JAVASCTIPT

    function removeSomething()
{
    if (window.confirm("Are you sure you want to remove this?")) {
        // place code here to remove whatever you want to remove
    }
}

    It doesn’t quite make sense that this function should be placed in a submit button. A submit button is usually part of a form, and, as your code is now, this form will be submitted regardless of the answer of the user. You shouldn’t be using a submit button if there is no form. See also: HTML submit button onclick code.

    Login or Signup to reply.
  2. 0

    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?')">
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search