OnClientClick and Click event do not shoot together for a button - a problem in FireFox

Question

I have an Onclientclick event attached to a button in the server code, as shown below,

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

In addition, the onClick event is attached for the same button on the aspx page,

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

A server click event should fire if onclientclick returns true. The ValidateData () function is called to validate the records in the form.

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

---

Where can I apply this Page.ClientScript.GetPostBackEventReference () code 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 does not call the ValidData function. I place a warning inside javascript, but the warning message does not appear in Firefox. But IE shows a warning 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

FireFox does not handle the OnClientClick and OnClick events (although Internet Explorer did a great job of this). To fix this, there is a Page.ClientScript.GetPostBackEventReference() method that can be used that generates client-side Javascript to perform postback for controls.

Thus, the following code will hide everything on the page except the load schedule, and also call the btnSubmit postback method. The reason it returns false is because otherwise, Internet Explorer called the OnClick method twice on the server side.

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

Answer 2

I found the problem and fixed it. Below is the solution for my problem.

I use telerik controls, which clientID is not considered an object in Firefox. But IE treats the clientID as an object. Therefore, my previous code works fine in IE and not in Firefox. Now I changed OnClientClick, passing the clientID as a string, as shown below, in one 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 great in both IE and Firefox.