Can anyone help me figure out how to maintain the control state that has been modified in Javascript?
I am working with two TextBoxes, one DropDownList, and a button (all Runat=Server) in C# ASP.net 2010 Express.
The first textbox accepts any user input. The second textbox's enable state changes based on the selected value from the DDL. If the DDL value is "-", the second textbox becomes Enabled = False. If it's not "-", then it becomes Enabled = True. This change is implemented through Javascript.
In my Page Load event, I have included the following code:
if (!IsPostBack)
{
txtKey2.Text = "";
txtKey2.BackColor = System.Drawing.ColorTranslator.FromHtml("#CCCCCC");
txtKey2.Enabled = false;
}
Additionally, on my aspx page, there is some JavaScript code to clear the textbox data and disable it.
This is for the Second Textbox.
<asp:TextBox ID="txtKey2" runat="server" Width="425px" EnableViewState="False"></asp:TextBox>
And here is for the DDL.
<asp:DropDownList ID="selKey1" runat="server" onchange="EnableSelkey(this.value,1)">
<asp:ListItem Value="0">-</asp:ListItem>
<asp:ListItem Value="1">AND</asp:ListItem>
<asp:ListItem Value="2">OR</asp:ListItem>
</asp:DropDownList>
This is the code for my JavaScript function (note that I plan to implement other textboxes and DDLS, hence the Else if condition).
function EnableSelkey(val, strID) {
var txtBox;
if (strID == "1")
txtBox = document.getElementById('<%= txtKey2.ClientID %>');
else if (strID == "2")
txtBox = document.getElementById('<%= txtKey3.ClientID %>');
else
txtBox = document.getElementById('<%= txtKey4.ClientID %>');
if (val != 0) {
txtBox.disabled = false;
txtBox.style.backgroundColor = "White";
txtBox.value = "";
txtBox.select();
}
else {
txtBox.disabled = true;
txtBox.style.backgroundColor = "#CCCCCC";
txtBox.value = "";
}
}
I do not have anything in the button click event.
Upon running the project, the page loads correctly. The second textbox's enabled state is initially set to False (as per the Page_Load event). So far so good.
When I select a value other than "-" from the DDL in my browser, the textbox becomes enabled due to the Javascript - everything works fine here.
I enter a value, click the button, causing a Page PostBack. At this point, the textbox remains enabled because of EnableViewState="False" for the textbox.
If I choose the DDL value as "-", the second textbox should become disabled. However, upon clicking the button and triggering a Page PostBack, the textbox remains enabled. < Is there a solution to this puzzling challenge? Here are some image URLs for testing purposes:
State 1,
State 2,
State 3 Apologies for the lengthy post.