Hi,
In the following code, I'm attempting to:
1. Disable all the LCLTextBox & UCLTextBox textboxes when the page loads
2. Add an event listener that will enable/disable them based on what is selected in the LCLSelector & UCLSelector dropdownlists.
The html/asp code is as follows:
<body onload="changeLUCLTextBoxStatus()">
<!--other html code-->
<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>
. . .
<!--rest of the table rows-->
. . .
<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>
<!--other html code-->
</body>
The js script (in the same html document) is as follows:
<script type="text/javascript">
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(LCLSelectorName).addEventListener("change", function () {
var e = document.getElementById(LCLSelectorName);
var strUser = e.options[e.selectedIndex].value;
if (strUser == "Not in List") {
document.getElementById(LCLTextBoxName).disabled = false;
} else {
document.getElementById(LCLTextBoxName).disabled = true;
}
})
document.getElementById(UCLSelectorName).addEventListener("change", function () {
var e = document.getElementById(UCLSelectorName);
var strUser = e.options[e.selectedIndex].value;
if (strUser == "Not in List") {
document.getElementById(UCLTextBoxName).disabled = false;
} else {
document.getElementById(UCLTextBoxName).disabled = true;
}
})
}
</script>
The textboxes remain enabled when the page loads. How can I fix this? Additional info:
The problem seems to be the iterator as the following works correctly, but I'm trying to avoid having to list out every control manually
<script type="text/javascript">
function changeLUCLTextBoxStatus() {
document.getElementById("LCLTextBox1").disabled = true;
document.getElementById("UCLTextBox1").disabled = true;
//repeat for the remaining 19 textboxes
//LCLSelector enable/disable, repeat for the remaining 19 dropdownlists
document.getElementById("LCLSelector1").addEventListener("change", function () {
var e = document.getElementById("LCLSelector1");
var strUser = e.options[e.selectedIndex].value;
if (strUser == "Not in List") {
document.getElementById("LCLTextBox1").disabled = false;
} else {
document.getElementById("LCLTextBox1").disabled = true;
}
})
//UCLSelector enable/disable, repeat for the remaining 19 dropdownlists
document.getElementById("UCLSelector1").addEventListener("change", function () {
var e = document.getElementById("UCLSelector1");
var strUser = e.options[e.selectedIndex].value;
if (strUser == "Not in List") {
document.getElementById("UCLTextBox1").disabled = false;
} else {
document.getElementById("UCLTextBox1").disabled = true;
}
})
}
</script>
