Javascript Confirm 'Are you sure?' not triggering click event when true

[Brock]

I have a ComboBox and a button. The ComboBox is bound to a table of 'groups'. The button allows you to add a new 'group' record to that table if whatever is currently typed in the ComboBox doesn't match anything in the dropdown by calling the button's click event 'btnAddGroup_Click'
.

My problem is, even though my javascript function addGroup is being called with no problem... when the confirm is true... the server side click even 'btnAddGroup_Click' is not being called. When the confirm is false, I do not want the click even to to called.

Strangely, when I remove the 'return' from "return addGroup();" it will trigger my server side click event whether I say yes or no to the confirm. Am I making some fundamental JavaScript mistake?


    function addGroup() {

        var addgroupbutton = document.getElementById('<%= btnAddGroup.ClientID %>');
        var changegroupbutton = document.getElementById('<%= btnSave.ClientID %>');


        if (confirm('Are you sure you want to add a new group?')) {
            
            addgroupbutton.disabled = true;
            changegroupbutton.disabled = false;
            alert("1");
            return true;
        }
        else {
            alert("2");
            addgroupbutton.disabled = false;
            changegroupbutton.disabled = true;
            return false;
        }
    }


                        <telerik:RadComboBox ID="rcbAddCompanyGroup" runat="server" Width="310px" Height="150"
                            EmptyMessage="Select a Company Group" DataSourceID="SqlDataSource2" 
                            DataTextField="CompanyGroup" OnClientItemsRequested="OnClientItemsRequested" OnClientSelectedIndexChanged="OnClientSelectedIndexChanged"
                            DataValueField="CompanyGroup" EnableAutomaticLoadOnDemand="True" ItemsPerRequest="20"
                            ShowMoreResultsBox="true" EnableVirtualScrolling="true" Filter="Contains">
                        </telerik:RadComboBox>
                        <asp:Button ID="btnAddGroup"
                        OnClick="btnAddGroup_Click"
                        OnClientClick="return addGroup();" 
                        runat="server" Text="Add Group" Visible="true" Width="87px" />





    Protected Sub btnAddGroup_Click(sender As Object, e As System.EventArgs)
        If rcbAddCompanyGroup.Text.Trim.Length <> 0 Then
            insertCompanyGroup()
        End If
    End Sub

[Eyup]

Hi Brock,

Please note that disabled controls are not permitted to submit:
http://www.w3.org/TR/html401/interact/forms.html#h-17.12.1

You will need to enable your button just before the actual postback:

<asp:Button ... OnClientClick="return addGroup(this);"/>

JavaScript:

function addGroup(addGroupButton) {
    addGroupButton.disabled = true;
    if (confirm('Are you sure you want to add a new group?')) {
        addGroupButton.disabled = false;
        return true;
    }
    else {
        addGroupButton.disabled = false;
        return false;
    }
}

That should do the trick. Please give it a try and let me know if it helps you.

Kind regards,
Eyup
the Telerik team

[Brock]

I made your suggested changes (I even tried removing all references to enabling or disabling the addGroupButton), however I still have the same problem of it not triggering the server side click event.

However, If I remove the 'return' from OnClientClick="return addGroup(this);"

then the submit works properly and calls the server side click event... however it calls the click event regardless of whether you say 'Yes' or 'Cancel' to the confirm box.

[Eyup]

Hi Brock,

I have prepared a sample web site to demonstrate that the suggested approach works as expected. Could you please check out the attached application and verify that the new group is added correctly?

Greetings,
Eyup
the Telerik team