We Keep Coding

ASP/ASPX Label Visibility with JavaScript

I am currently attempting to change the visibility of a label when a button is clicked. The label is initially hidden and will appear after the button is clicked.
I have tried using DevEx controls and the SetVisible() function. The function works, but if the label is rendered 'display: none' via css first like I want in my situation, it does nothing.
I have also attempted to use ASP labels and change the display property on click, but once again nothing seems to happen.
Style
.dxd
{
display: none;
}
JavaScript
<script type="text/javascript">
function fncShow(s, e) {
//show devex label
lblTest.SetVisible(true);
//show ASP label
document.getElementById("lblASP").style.display = 'block';
}
</script>
Body
<dx:ASPxButton runat="server" ID="btnTest" Text="Show" Width="100px" AutoPostBack="false">
<ClientSideEvents Click="fncShow" />
</dx:ASPxButton>
<dx:ASPxLabel runat="server" ID="lblTest" Text="Test label" ClientInstanceName="lblTest" CssClass="dxd"></dx:ASPxLabel>
<asp:Label runat="server" ID="lblASP" Text="Test label 2" CssClass="dxd"></asp:Label>
I've exhausted quite a few methods trying to get either controls to work with no success. At this point, I am interested to know if it is possible to have a label invisible first, and if it is possible how it is achievable using both controls. I am new to JS so maybe I am missing something, but all examples have been fruitless. Any help would be greatly appreciated.

Turns out I was missing a few small settings to make all this come together.
On the DevEx control there is a property called ClientVisible, set that to false for the object to be initially hidden. After that, you can freely use label.SetVisible() to show and hide it.
On the ASP label, Kevin was right about the ClientIDMode needing to be set to static. Once set to static the ID wont change up, and both display and visibility properties can be changed using the document.getElementByID().style.visiblity or style.display, whichever you prefer.

Textbox becomes readonly on postback even when setting the readonly attribute to false manually

So, in my current application in ASP.net, I have a weird bug. Textbox that I have added in the existing page, goes in read only mode after the postback. When the page loads the first time, textbox works fine. But after page load, it stays enabled and in read only mode.
I checked Dev tools in IE, and the text box has readonly attribute set to false, as expected. I can even set the other properties from the js function called during page load, and they work fine. Only the readonly attribute doesn't work.
I am unable to figure out a reason as to why this is happening, so I am unable to solve it either.
<tr> <td nowrap align="right"> <asp:Label ID="lblResTimeDescription" runat="server" EnableViewState="False" CssClass="Common">Response Time Comments</asp:Label> : </td>
Textbox code:
> <asp:TextBox ID="txtResTimeDescription" CssClass="TextBox"
> MaxLength="200" TextMode="MultiLine" runat="server" Width="100%"
> Height="50px" ReadOnly="false"></asp:TextBox>
P.S. Do let me know, which code I can post here.
Edit: JS function called at the very end of the page load.
function fnEnableComments(e) {
var strCompletion = document.getElementById("ddlCompletion").value;
if (strCompletion == "Y") {
document.getElementById("txtResTimeDescription").disabled = false;
document.getElementById("txtResTimeDescription").setAttribute("value", "zyx");
document.getElementById("txtResTimeDescription").setAttribute("ReadOnly",false);
}
else {
document.getElementById("txtResTimeDescription").disabled = true;
document.getElementById("txtResTimeDescription").value = "";
}
}
This function gets called properly, as I can see the value change to zyx.
Edit 2:
Removed all hints of readonly from code and js. Still the same problem. Also, the textbox is getting enabled properly, on change of dropdown, gets the value set properly. I can even click on the text box to set the focus, but I just can't change the value in it.
Edit 3:
Program workflow explanation:
User select a record from the listings page and the page loads with information about that record. User can enter data, and save the same. But user can't set the completion flag to yes, without providing comments. In other cases, the comment is not needed at all. This textbox is used to add comments. Typically user updates all the data, and saves the information. After saving the information, page refreshes, and at which point user changes the completion flag. So, on dropdown change and on page load, I check for the completion flag and enable and disable the comments textbox.
This all works fine as far as logic goes. Only thing is when users saves the data first time, and page reloads, textbox stays readonly even when user changes the completion flag. If user refreshes the page again, then code works fine. Basically, this bug causes user to refresh the page, manually after every save, defeating the purpose of refreshing from the code.

attempts to place this before finalizing what you need the first time in the code behind
txtResTimeDescription.Attributes.Remove("readonly");
with this if you put readonly attribute when you take away this textbox

Finally found a solution. I still don't know why it is happening. But below code did the trick.
document.getElementById("txtResTimeDescription").setAttribute("readOnly", false);
I was using the same code earlier too, sadly with wrong capitalization of the attribute.

What does webform_DoPostBackWithOptions() do?

I have a button declared like this:
<asp:Button id=Send runat="server" EnableViewState="False"
ToolTip="Email me this report" CssClass="Button" Text="Email me this report">
</asp:Button>
But if I do Inspect Element in browser, it shows like this:
<input type="submit" class="Button" title="Email me this report"
id="ctl03_Toolbar_Send" onclick="javascript:WebForm_DoPostBackWithOptions(new
WebForm_PostBackOptions("ctl03$Toolbar$Send","", true, "", "";, false, false))"
value="Email me this report" name="ctl03$Toolbar$Send">
I wonder where the onclick event comes from? What does it do?
Thanks for your help in advance.

If you set the PostBackUrl property for the Button server control, then it means it is cross page posting and then asp.net framework instead of normal __DoPostBack() adds "WebForm_DoPostBackWithOptions". Check if you have "PostBackUrl" Property set for this button.
<asp:Button id=Send runat="server" EnableViewState="False" PostBackUrl="~/Page2.aspx"
ToolTip="Email me this report" CssClass="Button" Text="Email me this report">
</asp:Button>
If in your case you have not set the "PostBackUrl", then ASP.NET framework also does not add this by default for Button Control, so this means there has to be another control setting the OnClick attribute value probably using following sever side code -
PostBackOptions myPostBackOptions = new PostBackOptions(this);
myPostBackOptions.ActionUrl = "Page2.aspx";
myPostBackOptions.AutoPostBack = false;
myPostBackOptions.RequiresJavaScriptProtocol = true;
myPostBackOptions.PerformValidation = true;
// Add the client-side script to the HyperLink1 control.
Button1.OnClientClick = Page.ClientScript.GetPostBackEventReference(myPostBackOptions);

Understand that there's no such thing as "ASP.NET Controls" in the rendered HTML that the web server outputs in response to a user's request. All the ASP.NET controls do is render some HTML in a way that makes everything work as expected on the server. The Button control is emitting the "onclick" attribute in order to trigger some JavaScript that will result in the form data being posted back to the server (assuming any client side validators don't prevent it).
The reason for using this method to send the data back is, as I just mentioned, to give any client-side script a chance to run first, such as data validation controls that can check and see if any required fields are not filled out.
Basically, unless you're looking to create your own ASP.NET server controls, you don't need to worry too much about exactly what is getting emitted as the ultimate response from IIS. It's good to be familiar with what's happening (and I'm certainly not saying that you shouldn't learn exactly how server controls do their thing), but you don't have to be intimately familiar with every client-side call and parameter that ASP.NET is making in order to get started.

Remove "EnableViewState="False" and it should use the default PostBack.
When you set button to not store state, it will use this option instead which is wired to the page_load javascript event differently on the page.

Also if there is some validation control on the page this can cause it as well. Set the CausesValidation property of the button to false.
<asp:button runat="server" ID="test" CausesValidation ="false" />

javascript not storing value in textbox in asp

I am using javascript in an asp.net page where I am also using html textarea to get the text from users.
I want to store that text in the asp:TextBox below and set the visibility of that textbox to "false"..
The problem arises as I use the hidden textbox to store the value , my javascript is not working, and as I set the visibility to "true" it starts working again. but i didn't want to show textbox..
I included the textbox as:
<asp:TextBox ID="txtboxhead" runat="server" Visible="false"></asp:TextBox>
and i use javascript as:
document.getElementById('txtareahead').readOnly = true;
text = document.getElementById('txtareahead').value;
document.getElementById('<%= txtboxhead.ClientID %>').value = text;
how this problem can be solved..
please help me out..

The reason your javascript can not access the textbox when the visibility is set to false is because it simply doesn't exist.
This is because the server is processing the request and because it is set to false it doesn't render it to the page. What you want to do is to change the style of the textbox so it is hidden.
Eg below,
<div style="display:none">
<asp:TextBox ID="txtboxhead" runat="server"></asp:TextBox>
</div>
This way your script will still run and the users will not be able to see the textbox.
HTH

Sounds like what you really want is an <asp:HiddenField> it won't display on the page, but you'll be able to change its contents using javascript.

JavaScript - control.style.display = "none"; and control.style.display = "";?

When I created a label I set it's display to none in the designer.
<asp:Label ID="label1" runat="server" style="display:none;" Text="LABEL" asp:Label>
I use javascript to turn the label visible by:
var lbl = document.getElementById('label1');
lbl.style.display="";
WHen I do this the space is created where the label would be on the form but the label itself doesn't show up. I have tried
lbl.style.display="inline";
lbl.style.display="block";
just to see if the label would show up. Still nothing though. Just the extra space where the label would be is created.

You were saying
WHen I do this the space is created where the label would be on the form but the label itself doesn't show up. I have tried
That makes me believe that somewhere in your CSS you may have visibility set to hidden. That normally covers the space of the element, but doesn't show it. The display controls whether or not the space is preserved for the element.

Are you certain you have the control ID correct? Unless you set ClientIDMode to Static, the actual control ID will probably be something much longer than the ID you specify. Check the control's ClientID property.