How can I confirm and then disable a button in asp.net/javascript

Question

I have a standard ASP.NET 2.0 web page with a Delete button on it. What I need and can't figure out how to pull off is when the user presses the delete button a confirm dialog popups asking the user "are you sure?". If the user says yes then I want to disable the delete button and perform a postback that will run the server side code deleteButton_Click.

Here is the tag:

<asp:Button ID="deleteButton" Text="Delete" OnClick="deleteButton_Click" runat="server" />

Here is the javascript (in jquery) to handle the client side click:

var deleteButton = $(input.eq(0));
deleteButton.click( function()
{
    var a = confirm( "Are you sure you want to delete this item?" );
    if ( a == false )
    {
        return false;
    }
    else
    {
        deleteButton.attr( "disabled", "disabled" );
        __doPostBack( deleteButton.attr( "id" ), "" );
    }
} );

The confirm dialog works as expected and the disabling works ok too. The form does postback fine but it does not run the deleteButton_Click event handler. The __doPostBack javascript code does exist on the page.

I could add UseSubmitBehavior="false" to the deleteButton tag but then it would ignore the confirm dialog answer.

So maybe I'm asking too much of ASP.NET here. Any ideas how to make this work?

Thanks,

Craig

score 2 · Answer 1 · answered Jun 26 '09 at 14:58

2

btnSubmit.Attributes.Add("onclick", "if(confirm(\"Are you sure you want to delete this item?\" ){this.disabled=true;" + ClientScript.GetPostBackEventReference(btnSubmit, "").ToString() + "}else{return false;}");

answered Jun 26 '09 at 14:58

George

7,864
5
29
25

score 1 · Answer 2 · edited May 23 '17 at 12:30

Take a look at this StackOverflow question I found it very useful:

Disable button on form submission

Add the confirm logic... and you should be set...

I went a head and wrote an extension method for you, and me as well :)

public static void ConfirmThenDisableButtonOnClick(this Button buttonControl, string confirmMessage, string clientFunction)
{
    StringBuilder sb = new StringBuilder();

    // If the page has ASP.NET validators on it, this code ensures the
    // page validates before continuing.
    if (buttonControl.CausesValidation && !String.IsNullOrEmpty(buttonControl.ValidationGroup))
    {
        sb.Append("if ( typeof( Page_ClientValidate ) == 'function' ) { ");
        sb.AppendFormat(@"if ( ! Page_ClientValidate('{0}') ) {{ return false; }} }} ", buttonControl.ValidationGroup);
    }

    //pop confirm, if confirm==true, disable button
    sb.AppendFormat("if(confirm('{0}\')){{this.disabled=true;", confirmMessage.Replace("\"","").Replace("'",""));

    // If a secondary JavaScript function has been provided, and if it can be found,
    // call it. Note the name of the JavaScript function to call should be passed without
    // parens.
    if (!String.IsNullOrEmpty(clientFunction))
    {
        sb.AppendFormat("if ( typeof( {0} ) == 'function' ) {{ {0}() }};", clientFunction);
    }

    // GetPostBackEventReference() obtains a reference to a client-side script function 
    // that causes the server to post back to the page (ie this causes the server-side part 
    // of the "click" to be performed).
    sb.Append(buttonControl.Page.ClientScript.GetPostBackEventReference(buttonControl, ""));

    // if confirm==false do nothing
    sb.Append(";}else{return false;}");

    // Add the JavaScript created a code to be executed when the button is clicked.
    buttonControl.Attributes.Add("onclick", sb.ToString());
}

just added validation checking as well :)

Thank you but I have looked at that post. However it does not address the confirm dialog issue. — Craig, Jun 26 '09 at 14:33
You could reduce the JavaScript to one line: return confirm('Are you sure?'); — Ian Oxley, Jun 26 '09 at 15:15
still like mine, as i take into account Validation, if i had more than 2-3 buttons on a page that needed this, i would say a jQuery solution would be more appropriate( if it took into account validation). — BigBlondeViking, Jun 26 '09 at 18:22

score 1 · Accepted Answer · answered Jun 26 '09 at 16:50

Thanks for the feedback but it was a fairly simple solution.

The javascript line should be:

__doPostBack( deleteButton.attr( "name" ), "" );

instead of:

__doPostBack( deleteButton.attr( "id" ), "" );

I didn't realize that the "name" attribute is the one that doPostBack method was looking for.

myQwil · Answer 4 · 2013-08-13T14:03:32.037

1

Rather than doing a postback through javascript, you can use OnClientClick to accomplish the same thing.

<asp:Button OnClientClick="if (confirm('Are you sure?')) {this.disabled = true;} else {return false;}" />

Or if you want to perform more actions through javascript than simply disabling the button, you can say something like this:

<asp:Button OnClientClick="return DisableOnConfirm();" />

You just need to make sure you're wording it in the form of a return statement so that when you don't want the ASP function to run, the statement will ultimately say "return false;".

edited Aug 13 '13 at 14:03

answered Aug 09 '13 at 19:57

myQwil

442
3
11

Welcome to Stack Overflow, we appreciate your contribution. Please explain what is happening so future visitors and the op are able to truly understand what you've submitted. – Greg Aug 09 '13 at 20:16
Ok, I've tried explaining it a bit better. Getting confirm dialogs to properly work with ASP has tripped me up in the past so I hope this helps people out. – myQwil Aug 13 '13 at 14:06

score 0 · Answer 5 · answered Jun 26 '09 at 14:07

0

Javascript:

deleteButton.disabled = true;

C#:

deleteButton.Enabled = false;

answered Jun 26 '09 at 14:07

Theofanis Pantelides

4,724
7
29
49

score 0 · Answer 6 · answered Jun 26 '09 at 15:12

0

You should probably disable the button on the server side in the deleteButton_Click event (because you will do a postback, so you recreate the page).

<asp:Button ID="deleteButton" Text="Delete" OnClick="deleteButton_Click" runat="server" OnClientClick="javascript:return confirm('are you sure blah blah blah ...')" />

And in the code-behind:

private void deleteButton_Click(object sender, EventArgs e) {
    deleteButton.Enabled = false;
    // and the rest of event handling ...
}

answered Jun 26 '09 at 15:12

ppiotrowicz

4,464
3
32
46

if you have deleted something, i don't think you would re-render the page with that data there... not sure i would need to disable server side... – BigBlondeViking Jun 26 '09 at 15:37

score 0 · Answer 7 · answered Jun 26 '09 at 15:47

It's a little odd that the click event isn't firing. I would've guessed it was due to the button being disabled but usually that only happens when the button is disabled on the server, not just the client. While not the ideal solution in your Page_Load function you can check for an postback and/or async postback and determine the target of the postback (in this case its your button), and then call some method from there. You can also pass in arguments using the __doPostBack() function.

score 0 · Answer 8 · answered Jun 26 '09 at 16:01

Initially, I wasn't sure if you were talking about the client side click event OR the server side click event. I think you should explicitly state that the server side click event is not firing.

Anyway, try <%@ Page EnableEventValidation="false" %> on your ASPX page and see if it works (It is set to true by default). I don't remember the nitty-gritty of this attribute works but this feature makes sure that the server side event is fired only in legitimate cases. E.g. let's say your page had XSS vulnerability and a hacker injected JavaScript to invoke the delete button. This attribute helps prevent those attacks.

score 0 · Answer 9 · answered Jun 26 '09 at 17:44

$(":submit").click(function ()
{
    $(this).attr("disabled", true); // disable input

    if (confirm("Press OK to submit"))
    {
        __doPostBack(this.id, ""); // if user presses OK; submit
    }
    else
    {
        // If user presses cancel; enable input and stop submit
        $(this).attr("disabled", false);

        return false;
    }
});

score 0 · Answer 10 · answered Dec 01 '15 at 22:19

I decided to make this a JS function that could be called from any button.

Here's a sample that works, however, I would move the JavaScript to a different place such as an existing .js file or the head tag.

<script>
    function confirmPostback(button) {
        if (confirm('Are you sure?')) {
            button.disabled = true;
            __doPostBack(button.name, '')
            return true;
        } else {
            return false;
        }
    }
</script>

<asp:Button ID="TestPostback" runat="server" Text="Test Postback"
        UseSubmitBehavior="false" OnClientClick="return confirmPostback(this)" />

How can I confirm and then disable a button in asp.net/javascript

10 Answers10