calling a javascript function in tabpanels button

Hi

I want to call a javascript function on a button_click() event. I was able to call this function without using tabcontrol. but I want to call this function by clicking on a button which is inside a tabpanel control .

Thanks in Advance

It should work, what is you code?

Can you provide a repro?

I have two tab panels , first one showinggoogle map .

<cc1:TabPanel ID="tab_google" runat="server">

<HeaderTemplate>Google Map</HeaderTemplate>
<ContentTemplate>
<div id="map" style="width:617;height:400" >

</div>
<input type="hidden" id="go" runat="server"/>
</ContentTemplate>
</cc1:TabPanel>

Its woking properly

and second tab panel having two <select> control.

See Below for Code

<cc1:TabPanel id="tab_distancecalc" runat="server" >
<HeaderTemplate>Distance Calculator</HeaderTemplate>
<ContentTemplate>
<div id="distance_calc" >
<form name=xyz>
<table cellspacing=0 cellpadding=0 align=center border=0>
<tbody>
<tr>
<td><font face=Verdana color=#800000 size=-1><b>Originating Point :</b></font></td>
<td align=left><b><font face=Verdana color=#800000 size=-1>Terminal Point :</font></b></td>
</tr>
<tr>
<td align="center">
<select size=12 name=abc>
<option
value=/1/0.158995591/-1/1.369611552 selected>Abiramam ,TN</option>
<option value=/1/0.526186067/-1/1.295638007>Abohar ,Punjab</option>
<option value=/1/0.371031746/-1/1.353291005>Achalpur ,Maharashtra</option>
<option
value=/1/0.275936067/-1/1.396306437>Addanki ,AP</option
<option
value=/1/0.343536596/-1/1.371362434>Adilabad ,AP</option>

</select>
</td>

<td align=middle>
<select size=12 name=pqr>
<option
value=/1/0.158995591/-1/1.369611552 selected>Abiramam ,TN</option
<option value=/1/0.526186067/-1/1.295638007>Abohar ,Punjab</option>
<option value=/1/0.371031746/-1/1.353291005>Achalpur ,Maharashtra</option>
<option
value=/1/0.275936067/-1/1.396306437>Addanki ,AP</option>
<option
value=/1/0.343536596/-1/1.371362434>Adilabad ,AP</option>
<option
value=/1/0.27280291/-1/1.349202381>Adoni ,AP</option>
<option
value=/1/0.410181658/-1/1.502780423>Adra ,WB</option>
</select>
</td>
</tr>
</tbody>
</table>
<p align="center">
<input onClick=DoCalc() type=button value=" Measure " name="button"></p>
<asp:Button ID="btn_mesure" runat="server" Text="Mesure" OnClientClick="DoCalc() return false" CausesValidation="False" ValidationGroup="distance_calc" />
</form>
</div>

</ContentTemplate>
</cc1:TabPanel>

Here is Java Script (This Java Script function should display distance )

<script language=JavaScript>
<!-- Begin
var eind=new Array();
var tourism=new Array();
var a=0;
var b=0;
function DoCalc() {
if (xyz.abc.options[xyz.abc.selectedIndex].value == null || xyz.pqr.options[xyz.pqr.selectedIndex].value==null) {
alert("Please enter both an Originating and a terminal place.");
}
else {
eind=xyz.abc.options[xyz.abc.selectedIndex].value.split("/");
tourism=xyz.pqr.options[xyz.pqr.selectedIndex].value.split("/");
d=Math.acos(Math.sin(eind[2])
*Math.sin(tourism[2])
+Math.cos(eind[2])
*Math.cos(tourism[2])
*Math.cos(eind[4]-tourism[4]));
a=Math.round(3956.073*d);
if (Math.sin(tourism[4]-eind[4]) < 0) {
b=Math.acos((Math.sin(tourism[2])
-Math.sin(eind[2])*Math.cos(d))
/(Math.sin(d)*Math.cos(eind[2])));
}
else {
b=2*Math.PI
-Math.acos((Math.sin(tourism[2])
-Math.sin(eind[2])
*Math.cos(d))/(Math.sin(d)
*Math.cos(eind[2])));
}
b=b*(180/Math.PI);
alert("Distance measured is:" +" " + Math.round(a*1.6094) +" "+ "kms.");
alert("hi");
}
}
// End -->
</script>

It has nothing to do with the tab panel. Calling a javascript function is the same no matter how many layers of control nesting there are. The problem is that you are missing a semicolon between "DoCalc()" and "return false". Use:

OnClientClick="DoCalc(); return false"
or
OnClientClick="DoCalc(); return false;"

I am geeting java script error "xyz is undefined"

xyz is a form which is declared inside tabpanel.

Hi,

May you try document.getElementById("xyz"), If xyz is runat server,use document.getElementById("<%=xyz.clientID%>").

Best Regards,