OnClientClick and Click event together for a button is not firing - issue in FireFox

Question

I have Onclientclick event attached to the button in serverside code like below,

TopPanelButton.OnClientClick = string.Format("if(!ValidData({0},{1},{2},{3})) return false;", txtOD.ClientID, radCmbOD.ClientID, txtgetMe.ClientID, RadAjaxLoadingPanel1.ClientID);

Also, the onClick event is attached for the same button in the aspx page,

 <asp:Button ID="TopPanelButton" runat="server" Text="Go" 
   CssClass="CBtn1" Width="30px" Height="21px" OnClick="TopPanelButton_Click" />

The serverside click event should fire if the onclientclick return true. The "ValidateData()" function is called to validate the entries in the form.

This code is working fine in IE. But in Firefox, both events are not firig. If I comment the "TopPanelButton.OnClientClick =..." code then onClick event is firing.

---

Where can I apply this code Page.ClientScript.GetPostBackEventReference() in my code below.

TopPanelButton.OnClientClick = string.Format("if(!ValidData({0},{1},{2},{3})) return false;", txtOD.ClientID, radCmbOD.ClientID, txtgetMe.ClientID, RadAjaxLoadingPanel1.ClientID);

Firefox is not calling the ValidData function. I put alert inside the javascript, but alert message is not shown in Firefox. But IE shows the alert message.

My validData function:

function ValidData(txtOND, ddlOND, txtgetMe, aPanel) {
        alert("Entered");
        if (!ValidNumber(txtgetMe)) {
            aPanel.hide();
            return false;
        }

        if (ddlOND.value == "Origin" || ddlOND.value == "Destination") {
            if (!ValidOriginOrDestination(txtOND, ddlOND.value)) {
                aPanel.hide();
                return false;
            }
        }
        else if (ddlOND.value == "O&D") {
            if (!ValidOND(txtOND)) {
                aPanel.hide();
                return false;
            }
        }

        if (ddlOND.value == "Region Starting with" || ddlOND.value == "Country Starting with" || ddlOND.value == "Budget Station Starting with") {
            if (txtOND.value.length == 0) {
                radalert("Enter  a value for " + ddlOND.value);
                aPanel.hide();
                return;
            }
        }
        aPanel.show();
        return true;
    }

Answer 1

I found the problem and fixed. Given below the solution for my problem.

I am using telerik controls which clientID is not considered as a object in Firefox. But IE consider the clientID as object. So my previous code works fine in IE not in Firefox. Now I changed the OnClientClick, by passing the clientID as string like below in single quoute:

TopPanelButton.OnClientClick = string.Format("javascript:if(!ValidData('{0}','{1}','{2}','{3}')) return false;", txtOD.ClientID, radCmbOD.ClientID, txtgetMe.ClientID, RadAjaxLoadingPanel1.ClientID);

and in my javascript i used document.getElementById to get the object.

function ValidData(txtOND, ddlOND, txtgetMe, aPanel) {
        var l_aPanel = document.getElementById(aPanel);
        var l_txtgetMe = document.getElementById(txtgetMe);

        if (!ValidNumber(l_txtgetMe)) {
            return false;
        }

        var l_txtOND = document.getElementById(txtOND);
        var l_ddlOND = document.getElementById(ddlOND);

        if (l_ddlOND.value == "Origin" || l_ddlOND.value == "Destination") {
            if (!ValidOriginOrDestination(l_txtOND, l_ddlOND.value)) {
                return false;
            }
        }
        else if (l_ddlOND.value == "O&D") {
            if (!ValidOND(document.getElementById(txtOND))) {
                return false;
            }
        }

        if (l_ddlOND.value == "Region Starting with" || l_ddlOND.value == "Country Starting with" || l_ddlOND.value == "Budget Station Starting with") {
            if (l_txtOND.value.length == 0) {
                radalert("Enter  a value for " + l_ddlOND.value);
                return false;
            }
        }
        return true;
    }

This works fine in both IE and Firefox.