How to handle Confirm() of Javascript as per my following requirements?

Question

My Requirement is this. Steps:-

1. On Client Click (button)
2. Disabled the Button.
3. Then it should prompt for OK or CANCEL.
4. If OK then fire the OnClick event (Code Behind).
5. If CANCEL then don't make a server-side trip and enable the button.

Following is the code I am using for the button.

<asp:Button ID="btn1" OnClientClick="this.disabled=true;return Confirm();" Text="Testing"  runat="server" />

But instead of what I am expecting, it is disabling button and prompting Confirmation but if User hits Cancel then button stays as disabled.

Answer 1

There is no need to disable the button. user wont be able to do anything without clicking the buttons in the confirm box. Just use this.

 OnClientClick="return confirm('Are you sure you want to Submit?');"

Answer 2

try this in OnClientClick-

this.disabled=true;
var result = Confirm();
this.disabled = result;
return result;

If your trying to disable postback on the button just call return Confirm();

Answer 3

You've tagged this as jQuery, so I would suggest using jQuery to define an event handler, separate from the OnClientClick property:

<asp:Button runat="server" Text="Testing" CssClass="confirm-button" />
<script type="text/javascript">
    jQuery(function($) {
        $('.confirm-button').click(function(event) {
            $(this).attr('disabled', true);
            if (!confirm('Are you sure?')) {
                event.preventDefault();
                $(this).attr('disabled', false);
            }
        });
    });
</script>

However, as @Shoban pointed out, there's no need to disable the button, since confirm is modal. Since confirm is modal, there's only a need to disable to button after the confirm prompt has been addressed. So, the logic would probably be cleaner if you only disabled the button if the response from confirm is true:

        $('.confirm-button').click(function(event) {
            if (confirm('Are you sure?')) {
                $(this).attr('disabled', true);
            }
            else {
                event.preventDefault();
            }
        });

Answer 4

Only disable the button if they click OK.

var customConfirm = function(){
  var proceed = confirm("are you sure");
  if(proceed){
    // disable button while server is posting back
  }
  return proceed;
}