This is with respect to a a previous question:
Dynamically add addEventListener to DropDownList control and Enable or Disable TextBoxes based on DropDown selection using JavaScript in ASP.Net
The asp table markup is as follows:
On further testing, I realized that the
<asp:Table runat="server" ID="Table1" GridLines="Both">
<asp:TableRow ID="Table1_TitleRow">
<asp:TableCell ID="Header_Select"><strong>Select</strong></asp:TableCell>
<asp:TableCell ID="Header_Parameter"><strong>Parameter</strong></asp:TableCell>
<asp:TableCell ID="Header_LCL"><strong>LCL</strong></asp:TableCell>
<asp:TableCell ID="Header_UCL"><strong>UCL</strong></asp:TableCell>
<asp:TableCell ID="Header_LCLCustom"><strong>Custom LCL</strong></asp:TableCell>
<asp:TableCell ID="Header_UCLCustom"><strong>Custom UCL</strong></asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableCell ID="SelectCell1"><asp:CheckBox ID="ParamCheckBox1" runat="server"/></asp:TableCell>
<asp:TableCell ID="ParamCell1"/>
<asp:TableCell ID="LCLCell1"><asp:DropDownList ID="LCLSelector1" runat="server" /></asp:TableCell>
<asp:TableCell ID="UCLCell1"><asp:DropDownList ID="UCLSelector1" runat="server" /></asp:TableCell>
<asp:TableCell><asp:TextBox ID="LCLTextBox1" runat="server"/></asp:TableCell><asp:TableCell><asp:TextBox ID="UCLTextBox1" runat="server" /></asp:TableCell>
</asp:TableRow>
.
.
.
<asp:TableRow>
<asp:TableCell ID="SelectCell20"><asp:CheckBox ID="ParamCheckBox20" runat="server"/></asp:TableCell>
<asp:TableCell ID="ParamCell20"/>
<asp:TableCell ID="LCLCell20"><asp:DropDownList ID="LCLSelector20" runat="server"/></asp:TableCell>
<asp:TableCell ID="UCLCell20"><asp:DropDownList ID="UCLSelector20" runat="server"/></asp:TableCell>
<asp:TableCell><asp:TextBox ID="LCLTextBox20" runat="server"/></asp:TableCell>
<asp:TableCell><asp:TextBox ID="UCLTextBox20" runat="server"/></asp:TableCell>
</asp:TableRow>
</asp:Table>
The js script was:
<script type="text/javascript">
function addEventHandler(element) {
if (element.addEventListener) {
element.addEventListener('change', function () {
//var Table1nrows = document.getElementById("Table1").rows.length
for (var i = 1; i < 21; i++) {
LCLSelector(i);
UCLSelector(i);
}
}, false);
}
else {
element.attachEvent('onchange', function () {
for (var i = 1; i < 21; i++) {
LCLSelector(i);
UCLSelector(i);
}
});
}
}
window.onload = function () {
var Table1nrows = document.getElementById("Table1").rows.length
for (i = 1; i < 21; i++) {
var LCLSelectorName = "LCLSelector" + i.toString();
var LCLTextBoxName = "LCLTextBox" + i.toString();
var UCLSelectorName = "UCLSelector" + i.toString();
var UCLTextBoxName = "UCLTextBox" + i.toString();
document.getElementById(LCLTextBoxName).disabled = true;
document.getElementById(UCLTextBoxName).disabled = true;
//LCLSelector enable/disable
addEventHandler(document.getElementById(LCLSelectorName));
//UCLSelector enable/disable
addEventHandler(document.getElementById(UCLSelectorName));
}
}
function LCLSelector(i) {
var e = document.getElementById("LCLSelector" + i);
var strUser = e.options[e.selectedIndex].value;
if (strUser == "Not in List") {
document.getElementById("LCLTextBox" + i).disabled =false;
} else {
document.getElementById("LCLTextBox" + i).disabled = true;
}
}
function UCLSelector(i) {
var e = document.getElementById("UCLSelector" + i);
var strUser = e.options[e.selectedIndex].value;
if (strUser == "Not in List") {
document.getElementById("UCLTextBox" + i).disabled = false;
} else {
document.getElementById("UCLTextBox" + i).disabled = true;
}
}
</script>
Problem: When ParamCheckBox1...ParamCheckBox20 are not checked at Page_Load, all the textboxes UCLTextBox1...UCLTextBox20 remain disabled. It's as if only the following function ran:
window.onload = function () {
var Table1nrows = document.getElementById("Table1").rows.length
for (i = 1; i < 21; i++) {
var LCLSelectorName = "LCLSelector" + i.toString();
var LCLTextBoxName = "LCLTextBox" + i.toString();
var UCLSelectorName = "UCLSelector" + i.toString();
var UCLTextBoxName = "UCLTextBox" + i.toString();
document.getElementById(LCLTextBoxName).disabled = true;
document.getElementById(UCLTextBoxName).disabled = true;
//LCLSelector enable/disable
addEventHandler(document.getElementById(LCLSelectorName));
//UCLSelector enable/disable
addEventHandler(document.getElementById(UCLSelectorName));
}
}
& everything else in the script did not. What could be causing this?