How to add a confirm dialog to a command button?

Question

I'd think this would work just fine, but it seems to prevent the action function from firing regardless of the confirm response

<apex:commandButton value="Remove All" action="{!removeAll}" rerender="form"
     status="LoadingStatus" onclick="return confirm('Are you sure?');"/>

Answer 1

I know this has been answered but I thought I would toss my hat into the ring. Taking a look at the code generated by the commandButton tag, the onclick code goes before salesforce's own code to call the controller method. What this means is

onclick="return confirm('Are you sure?');"

is always returning before calling the code to the controller method. What I have done is to wrap the return in an if statement and call it only if the condition is correct. The code below will call return if the confirmation is false.

onclick="if(!confirm('Are you sure?')){return false};"

Answer 2

In my case, it was returning to controller method for both options( true or false) so then i changed it to the code below and it started to work.

onclick="if(!confirm('Are you sure?')){return false;}"

Answer 3

Was able to get this to work with an action function, but hopefully someone in the community might have cleaner way to handle this.

<apex:actionFunction action="{!removeAll}" name="removeAll" rerender="form" status="LoadingStatus"/>
<script>
function confirmRemoveAll() {
    if(confirm('Are you sure?')) {
        removeAll();
    }
    return false;
}
</script>
<apex:commandButton value="Remove All" onclick="return confirmRemoveAll();"/>

Answer 4

I'd go with the way you've handled it - you cant have a javascript prompt as well as an action method invocation in the same button. You'd have to proxy it via an Action Function or alteratively use JS-Remoting.

Answer 5

I've done this with jQuery...not 100% sure why it doesn't work for you, but maybe there's something going on with the VF framework attaching its own events to the onclick handler of the button (conjecture by me). If you use jQuery you can attach your own event pretty easily and I know it works.

Anyway, back to the solution...it could be useful to have the script in some common JS file that you include in many pages where you want to hesitate on taking some generic cancel or save. Then you just give your commandbutton the proper styleClass and get the behavior immediately. For example's sake I just have it all in one page.

Put jQuery in your static resource, for example, in a zip called res in a subfolder called js and be sure to include it prior to using it.

Zip file with the following structure: /res/js/jquery-1.8.1.min.js

Referenced from VF as follows:

<apex:includeScript value="{!URLFOR($Resource.res, 'js/jquery-1.8.1.min.js')}"/>

Example code snippet from VF

<script type="text/javascript">
    jQuery.noConflict();

    jQuery(document).ready(function() {

        jQuery('.saveAction').click(function(e) {
            if ( confirm('Are you sure you want to save? Click OK to continue saving.') ) {
                return true;
            }
            e.preventDefault();
        });
    });
</script>

<!-- somewhere on your page is your button -->
<apex:commandButton action="{!save}" value="Save" styleClass="saveAction"/>

Answer 6

I think your pretty much on the right track. The easiest way to get things into the controller is to post-back the form.

This also allows you to do field-level validation and mark-up on the VF form elements without manually adding "Errors" to input boxes.