Confirmation popup window for two asp:button controls when usesubmitbehaviour set to false

Question

Hi,

I have a control embedded in an asp.net (2.0) page. When the control is on a page I want the default behaviour when the return key is press to run an action on the control, not anything on the page. To this end I found that setting

UseSubmitBehaviour="false"

on the buttons on the page worked great. This was fine until I needed to have a confirmation window appear when this button on the page was clicked. When they push that button they are permanently deleting records from the system and want to make sure they are clicking the correct button. The button looks like this:

<asp:Button runat="server" ID="btnDeleteCollationResultstop" Text="Delete Selected" UseSubmitBehavior="true"
ToolTip="Delete all the selected items in the Collation tool"  OnClick="btnDeleteCollationResults_Click" 
OnClientClick="return confirm('Are you sure you wish to Delete the selected Item(s)?');" />

The popup confirmation window does load and work if I set UseSubmitBehaviour to true but then the return key fires the delete button, which again I really don't want.

So my question is how can I get it to do the following:

1) make default action of the return key to fire on my control and not the page it is in

2) ensure a confirmation window appears when the user clicks the delete button and only proceed if they confirm the deletion?

Thanks

Jon

EDIT

One idea I just had would be to make it so that none of the buttons submit back on return, and hook in some JQuery to listen for Return and do the submit for the button I want, (don't know how to do that straight away though).

Answer 1

What's happening here is that when you set UseSubmitBehavior="true" in your button, the button is rendered as . This uses the browser default behavior of submitting the form when the enter button is pressed. But if you set UseSubmitBehavior="false", but button is rendered as ; and, the onclick event (in the client) is wired up to '__doPostBack()' which submits the form.

The problem is that if you add anything to the OnClientClick property, it gets run before the __doPostBack(). If you return true or false, it will end the processing of the onclick event, because a value was returned, and __doPostBack() never gets fired. Here's what the rendered tag looks like:

<input type="button" name="button1" value="Click Me" onclick="return confirm('are you sure?');__doPostBack('button1','')" id="button1" />

The AjaxControlToolkit has a control which will make this work, if you'd like to use that. It is the ConfirmButton control (http://www.asp.net/AJAX/AjaxControlToolkit/Samples/ConfirmButton/ConfirmButton.aspx).

If you'd like to use jQuery, here's an example that does basically the same thing as the ConfirmButton control.

You're button should look something like this (be sure to remove the OnClientClick property):

<asp:Button ID="button1" runat="server" Text="Click Me" UseSubmitBehavior="false" onclick="button1_Click" />

And here's the JavaScript code:

<script type="text/javascript">
    $(function() {
        var btn = $('#<%= button1.ClientID %>');
        var oldScript = btn.attr('onclick');
        btn.attr('onclick', '');
        btn.click(function() {
            if (confirm('click a button.')) {
                if (oldScript) {
                    if ($.isFunction(oldScript)) {
                        oldScript();
                    } else {
                        eval(oldScript);
                    }
                }
                return true;
            } else {
                return false;
            }
        });
    });
</script>

Basically what this does is it removes the current "onclick" attribute value and stores it in a temporary variable. Then it wires up the confirm to the "click" event. If the confirm returns true, it will execute the old script that was in the "onclick" originally. If the confirm returns false, nothing else happens.