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

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;
    }

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.

FireFox not handling both an OnClientClick and OnClick event (although Internet Explorer handled it fine). To fix this there is a method Page.ClientScript.GetPostBackEventReference() that can be used that generates client side Javascript for doing a postback to controls.

So the following code will hide everything on the page except the loading graphic, and also call the btnSubmit postback method. The reason it returns false is that otherwise Internet Explorer would call the server side OnClick method twice.

btnSubmit.OnClientClick = String.Format("ElementStyle(document.getElementById('wrapper'),'display','none'); {0}; return false;", Page.ClientScript.GetPostBackEventReference(btnSubmit, ""));