Develop Reference

How to toggle the visibility of a document element?

I have a label on my form like so:
<asp:Label ID="lblPwPol"
runat="server"
Visible="false">
A bunch of text...
</asp:Label>
In a method called by the Page_Load event (VB.net), I attach some JS event handlers with this:
btnPasswordPolicies.Attributes.Add("onClick", "return mShowToolTip();")
cmdPasswordPolicies.Attributes.Add("onmouseleave", "return mHideToolTip();")
Which are defined as such:
function mShowToolTip(aCtrl, aArg1)
{
document.getElementById("lblPwPol").style.display = 'block';
return false;
}
function mHideToolTip()
{
document.getElementById("lblPwPol").style.display = 'none';
return false;
}
When my form loads, the label is not visible (correct).
When I click the label, I get an exception in my JS:
Javascript runtime error: Unable to get property 'style' of undefined or null reference
Which obviously means that document.getElementById("lblPwPol") returns null.
Any idea what I'm doing wrong? I feel like it's got to be something rally stupid, but I don't know JS at all.
I tried also switching out the id="lblPwPol" to be name="lblPwPol" instead, but that didn't make a difference.

First thing you should remove visible="false" to the label, because of you make it visible false it won't load in Dom. And keep style="display:none"
Like this
<asp:Label ID="lblPwPol"
runat="server"
Style="display:none">
A bunch of text...
</asp:Label>

I think you are confusing DOM elements with ASP WebUI WebControl elements (that are XML as well btw). Take a look at here how to access a Label control like yours: How to access asp:label text property from code behind?

How can I get the text from an Asp.Net TextBox control with Jquery or Javascript?

I have an Asp.Net TextBox control:
<asp:TextBox ID="txtFromDate" runat="server" CssClass="txtDateFrom"></asp:TextBox>
In a separate Jquery/Javascript file, I would like get the text from it... normally the text is like '9/1/2015'.
I have tried the following:
var r2FromDate = new Date($(".txtFromDate").val);
var r2FromDate = new Date($(".txtFromDate").val.toString());
var r2FromDate = new Date($(".txtFromDate").val());
var r2FromDate = new Date($(".txtFromDate").text());
var r2FromDate = new Date($(".txtFromDate").text);
and the same with using the # <%= txtFromDate.ClientID %> notation and it completely breaks with that.
Please help!

$('#txtFromDate').val();
You want to select using the ID, not the class.

var text = $("#<%=txtFromDate.ClientId %>").val();
ASP should then output the ID generated on the client and your javascript can select it. You can also reuse this variable instead of querying the DOM over and over [it has to find it every time you use jQuery like "$(...)"].
If your javascript is located in another file, you can use the name attribute instead
<asp:TextBox ID="txtFromDate" runat="server" CssClass="txtDateFrom" name="txtFromDate"></asp:TextBox>
$('input[name="txtFromDate"]').val();
https://api.jquery.com/attribute-equals-selector/

Alternatively, you can define the following property on your TextBox
ClientIDMode="static"
That will ensure that your ID on the client side will be the same as the server side id.
And then you can use:
$('#txtFromDate').val();

It was actually because I put the id as 'txtFromDate' and the class as 'txtDateFrom' instead of keeping them the same. I was trying to access the class 'txtFromDate' when it didn't exist.
.val() works when you select the right class.

You can try this through this you can also get asp button or any control for that matter.
var txt_txtFromDate = document.querySelector("input[id*='txtFromDate']");
alert(txt_txtFromDate.Value);
you can also try querySelectorAll() if you have multiple controls with same id in client side.
Also, $("input[id*='txtFromDate']") will work.

Getting ASP dropdownlist selected value using javascript

I have a dropdownlist in asp as below:
<asp:DropDownList ID="ddlActiveStatus" AutoPostBack="True" runat="server" onchange = "dconfirm()" OnSelectedIndexChanged = "ddlActiveStatus_SelectedIndexChanged">
<asp:ListItem></asp:ListItem>
<asp:ListItem Value="Y">Y</asp:ListItem>
<asp:ListItem Value="N">N</asp:ListItem>
</asp:DropDownList>
I would like to retrieve the value of selected index when user selects on a different set of values. I have a code like this:
function dconfirm(){
var e = document.getElementById("<%=ddlActiveStatus.ClientID%>");
var selVal = e.options[e.selectedIndex].value;
alert(selVal);}
Expected result is when user selects 'Y', the javascript will alert 'Y'. However the program kept throwing below error:
The name 'ddlActiveStatus' does not exist in the current context
I would like to get it done using javascript only. What have I missed out? Kindly advise.
Thank you.

While technically what you're doing should work, you can avoid referencing ddlActiveStatus.ClientID in your JavaScript by adding ClientIDMode="Static" directly on the ddlActiveStatus control.
Doing this gives you full control over the ID generated for the control so you can then simply use the following in your JavaScript:
var e = document.getElementById("ddlActiveStatus");

ASP sometimes changes the ID. Add a "Name" to the element like so:
<asp:DropDownList Name="DdlActiveStatus" ID="ddlActiveStatus" AutoPostBack="True" runat="server" onchange = "dconfirm()" OnSelectedIndexChanged ="ddlActiveStatus_SelectedIndexChanged">
Then use: var x = document.getElementsByName("DdlActiveStatus");
Or, you could use jquery:
$('[name="DdlActiveStatus"]').doStuff();

$('#ddlActiveStatusoption').val()
or
$('select#ddlActiveStatusoption:selected').val())

I've figured out a workaround for this. Hopefully it'll be able to help someone who're looking for answer.
Instead of getting the selected values of ddlActiveStatus in my javascript, I'll be passing the value by adding below code to my dropdownlist property as below:
onchange = "dconfirm(this.value)"
As for my javascript function it'll display the user selected value. Code as below:
function dconfirm(values)
{
alert(values);
if (values == 'Y')
{
//do something
}
}
This does the job for me. Hope it helps.
Thanks guys for your helpful replies, cheers.

the easy way for me is
var VarName = $('#<%=YouDropDownId.ClientId %>').val();
for your case you forget #
try this i hope it works
var e = document.getElementById('#<%=ddlActiveStatus.ClientID %>');
good luck.

Passing ClientId of a textbox to use it in a javascript function

this is my control:
<asp:TextBox ID="txt_rol" onkeyup="this.value=this.value.toUpperCase()" runat="server" BorderColor="#E0E0E0" BorderStyle="Solid" Width="240px"></asp:TextBox>
</strong>
<asp:ImageButton ID="imgBtnGuardar" runat="server" ImageUrl="~/imagenes/boton.guardar.jpg" OnClientClick="ValidaCajadeTextoVacia(document.getElementById('<%=txt_rol.ClientId%>'));MensajeCargandoJQUERY();"/>
The problem is, that i can't get the Id of the textbox.

Well, right off the bat I can tell you that there's a syntax issue in the code. It should be:
'<%= txt_rol.ClientID %>'
There may be other obstacles you need to overcome here too. For example, if these controls are nested in a GridView you won't be able to reference the control that way.

function masterClick(clicked, controlID) {
var dynCtrl = clicked.id.substring(0, clicked.id.lastIndexOf("_") + 1);
var tBox = document.getElementById(dynCtrl + controlID);
tBox.value = "";
tBox.focus();
}
Then call from your image button like...
masterClick(this,'txt_rol');
change tBox.value and focus to whatever action you like, but should have access to the control in JavaScript now. You can add in a check like " if (tBox) " to ensure you have an object. The downside is the static reference to the control within the inline javascript, and you have to adjust when the calling control is in a different container, grid, panel, etc.

Check the output with View Source and you will understand what is happening. You'll have to set the OnClientClick property server-side (onload). Or find a way to bind it OnClientClick='<%#SomeProperty%>'.
Another option could be to use jQuery to find your control:
$("input:text[id*=txt_rol]")
By the way: your JavaScript won't work if someone pastes in the textbox using the mouse (right-click/paste).

Find function for asp:FileUpLoad returns allways null

I have Created a Asp:FileUpload control in aspx page, I try to access the Control from Javascript using this code,
in Aspx page
<asp:FileUpload ID="fileUp" runat="server" />
in Javascript
var vbsfileupload = $find("<%= fileUp.ClientID %>");
but the vbsfileupload is always null value.
Please help me to resolve this issue.

I don't believe $find is a function at all. Try selecting the element using getElementById:
var vbsfileupload = document.getElementById("#<%= fileUp.ClientID %>");
Assuming you are running this part of the script after the element has loaded, vbsfileupload should now hold the desired element.