Could someone give me a pointer as to how to loop through all the panels of my tab container in client-side javascript?
I am not sure how to loop through the each tab Panel and do the validation
Validation: To check at least 1 radio button/checkbox (At least 1 control) or Else I need to show an error message telling nothing is selected from Tab1 or Tab2
Can any one please help me with it
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" ClientIDMode="Static" runat="server"></asp:ScriptManager>
<ajaxToolkit:TabContainer ID="TabContainer1" ClientIDMode="Static" runat="server">
<ajaxToolkit:TabPanel ID="TabPanel1" ClientIDMode="Static" runat="server">
<HeaderTemplate>Tab1</HeaderTemplate>
<ContentTemplate>
<asp:CheckBox ID="chk1" runat="server" />
<asp:CheckBox ID="chk2" runat="server" />
</ContentTemplate>
</ajaxToolkit:TabPanel>
<ajaxToolkit:TabPanel ID="TabPanel2" runat="server">
<HeaderTemplate>Tab2</HeaderTemplate>
<ContentTemplate>
<asp:RadioButton ID="rbt1" ClientIDMode="Static" runat="server" />
<asp:RadioButton ID="rbt2" ClientIDMode="Static" runat="server" />
<asp:RadioButton ID="rbt3" ClientIDMode="Static" runat="server" />
</ContentTemplate>
</ajaxToolkit:TabPanel>
</ajaxToolkit:TabContainer>
<input id="Button1" type="button" value="button" onclick="IterateTabs()"/>
</div>
</form>
<script type="text/javascript">
function IterateTabs() {
var tabBody = $find("<%=TabContainer1.ClientID%>")._body;
var returnArr = tabBody.getElementsByTagName("input");
for (i = 0; i < returnArr.length; i++) {
if ((returnArr[i].type.toLowerCase() == "checkBox") ||(returnArr[i].type.toLowerCase() == "radio")) { // Here we assume that we only check the TextBox,you may expand it to check other controls
alert("Element id:" + returnArr[i].id + " and value: " + returnArr[i].value);
}
}
}
</script>
</body>
</html>