Develop Reference

How to get the value from span element inside div that are set from C# code using Javascript

I have an aspx file with span sections inside a div:
<div id="child1container" runat="server">
<span class="textclass" id="UserName" runat="server" ClientId="username1"></span>
<span class="textclass" id="BankName" runat="server" ClientId="bankname"></span>
<div>
Here the values for Username and Bankname are set by the code behind (using .cs file). Once after the value is being set by the code, I need to capture the value of username and bankname in javascript using document.getElementById.value. Could someone help me on how to get this value in javascript so that I can do some more manipulation after this. I know I need to use window.onload function, but would like to know how to get the value from span element.

var val = document.getElementById("<%=BankName.ClientID%>").value

Typically ASP.NET controls have a ClientID property. That is how the ID will render in HTML.
<span class="textclass" id="BankName" runat="server" ClientId="bankname"></span>
Then in your javascript:
document.getElementById('<%= BankName.ClientID %>')

getElementById.elements not picking up label

Code first:
function loopForm() {
var e = document.getElementById("form1").elements;
for (var i = 0; i < e.length; i++) {
alert('this is ' + e[i].ID + ' of type' + e[i].type);
}
I have the above code sitting in a .js, which is called from a .aspx with dynamic created controls like textbox, dropdownlist, checkbox and labels, in Server side, in a form called form1. My question is,
the code is picking up all the controls' ID and types, except
labels and I am looking for a way to manipulate with label (change
style.display, color, etc)
I have attempted with JQuery code such as:
$("#form1 label").each(function() { //I used "div", "label" and all sort
alert('hi');
});
and does not work. Please note that while document.getElementById might work, the controls exist on the page differ from everytime so it cannot be hardcoded.
EDIT: Here's how label is added to the .aspx (in my codebehind):
private Label lbl = new Label();
System.Web.UI.HtmlControls.HtmlGenericControl NewDiv = new System.Web.UI.HtmlControls.HtmlGenericControl("DIV");
NewDiv1.Controls.Add(lbl);
form1.Controls.Add(NewDiv);

When you talk about labels, I suspect you are referring to ASP.NET server controls, such as asp:Label. If that is the case, then you're really looking for <span> tags, as ASP.NET turns a <asp:Label> into an html <span>.
And if you want to refer to these elements by their Id, you will notice that ASP.NET does not use the same Id on the client side as what you defined on the server side.
However, there is a workaround. If you want the client Id to be the same as the server id, set the following property on your server control: ClientIdMode="Static".
For example, in your .aspx page you have this:
<asp:Label runat="server" Id="lblName"></asp:Label>
It will generate something like this in the html:
<span id="someservergeneratedid_lblName"></span>
If you want to control the id yourself, you can do this:
<asp:Label runat="server" ID="lblName" ClientIdMode="static"></asp:Label>
And that will generate this in html:
<span id="lblName"></span>

the code is picking up all the controls' ID and types, except labels
That's normal. The elements collection is only supposed to contain the form controls (and fieldsets for some reason). Labels aren't supposed to be in there.
$("div").each(function() { alert($(this).val()); });
Div and label elements don't have values, so that shouldn't work.
You can select HTML label elements easily enough though:
jQuery("#form1 label").each(function () {
jQuery("body").append("<p>Appending because alert is disabled in snippets</p>");
});
label {
display: block;
padding: 2px;
margin: 2px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1">
<label>Hello
<input name="hello" value="world">
</label>
<label>Goodbye
<input name="hello" value="world">
</label>
</form>
As Olivier points out though, make sure your HTML looks how you expect and that ASP.NET is generating the elements you are looking for with the correct types.

getElementByID with dynamic ID

Hi I have a problem with my javascript within an ASP SharePoint web part page. The page is built the same as any other ASP page so the fact that its hosted within SharePoint shouldn't make any difference.
The problem is with my javascript within the page. I have Html Table made up of 8 cells. For each of these cells I am displaying a different div with different data within it onmouseover.
The problem comes with the ID for the Divs that I am trying to display. The Divs ID is changed at runtime but also changes daily so cant be inputted manually.
HTML:
<div id="Main" style="display: none;
<div id="hover1" runat="server" style="display: none">
Test
</div>
</div>
<table id="Table3" runat="server" >
<tr id="Tr8" runat="server" >
<td id="status1" runat="server" onmouseover="getDataXML('hover1')" onmouseout="hideDiv('hover1')">
Received
</td>
</tr>
</table>
The id 'hover1' at runtime is replaced with something like 'ctl00_m_g_6ddac285_ceb9_4b5a_9095_c4b216cf7dfd_ctl00_hover1'
Javascript:
function getDataXML(getID) {
document.getElementById('Main').style.display = "block";
document.getElementById(getID).style.display = "block";
};
The javascript works if I take the ID which is generated and hard code it but the ID changes daily meaning it becomes a problem. Any help I would greatly appreciate
Regards,

Set clientIdMode = static to the element
<div id="hover1" clientIdMode="static" runat="server" style="display: none">

you have to pass clientId like this:
onmouseover="getDataXML('<%=hover1.ClientID %>')"
or alternatively set ClientIDMode to Static, but in that case if you change div id in aspx, you have to explicitly change where you have used Id and it will be difficult to catch becuse there will be no compile time error.

setting asp:RadioButton Text from javascript

I am having the following Radio butttons in my aspx file.
<asp:RadioButton ID="rdoOption1" runat="server" GroupName="grpAnswers"/>
<asp:RadioButton ID="rdoOption2" runat="server" GroupName="grpAnswers"/>
<asp:RadioButton ID="rdoOption3" runat="server" GroupName="grpAnswers"/>
<asp:RadioButton ID="rdoOption4" runat="server" GroupName="grpAnswers"/>
I want to set the text from javascript on a button's click.
Javascript code is as follows.
document.getElementById("rdoOption1").innerHTML = "sometext";
I've also tried with Text,nodevalue instead of innerHTML, no use. Plz help.

You need to use ClientID in javascript instead of using the server side id. As the server side id is changed when html is generated by asp.net. You also have : instead of semi colon at the end of javascript statement. Use value instead of innerHTML as that is not for input html elements.
document.getElementById("<%= rdoOption1.ClientID %>").value = "sometext";
If you have .Net Framework 4 and above then you can use Control.ClientIDMode="static" to keep the server id on the client side.
Edit The second thing you have to take care is to make sure the html element you are trying to access is already added to DOM. You can do this by putting the script after the html elements you are trying to access. The best place would be just before the ending body tag </body>
<script type="text/javascript>
document.getElementById("rdoOption1").innerHTML = "sometext";
</script>
</body>

Atlast I've found the solution for this.
Actually the asp:RadioButton is rendering in the browser as follows,
<input name="grpAnswers" id="rdoOption1" type="radio" value="rdoOption1"/>
<label for="rdoOption1">
Note: It'll generate label only if you specify some value for Text property of the asp:RadioButton.
So ,I have changed my code as follows,
<asp:RadioButton ID="rdoOption1" runat="server" GroupName="grpAnswers" Text=" "/>
My Javascript code to set Text for that asp:RadioButton is as follows,
document.getElementById("rdoOption1").nextSibling.innerHTML = "someText";
This one worked for me.Thanks to all those who spent their valuable time in answering my question. :)

ASP.Net controls are server side controls and not client side controls like HTML.
Their actual ID's get generated during the run time not before hand.
So, your syntax should be some thing like:
document.getElementById("<%= rdoOption1.ClientID %>").innerHTML = "sometext";

Check out this post: how-to-change-the-text-of-a-radio-button.
I don't think you can change the text using innerText of a radio button.

Emptying dropdown list on event not working

I have two dropdown menus and a linkbutton:
<form name="OptionForm" method="post">
<p>
<label for="ddlLocJobPhOpt" class="ui-accessible">Location Job Phase</label>
<asp:DropDownList runat="server" ID="ddlLocJobPhOpt" data-mini="true"></asp:DropDownList>
</p>
<p>
<label for="ddlFrmnOpt" class="ui-accessible">Foreman</label>
<asp:DropDownList runat="server" ID="ddlFrmnOpt" data-mini="true"></asp:DropDownList>
</p>
<asp:LinkButton ID="lnkSelectOptions" data-icon="arrow-r" data-iconpos="right" runat="server" data-role="button" Class="custom-btn" data-inline="true" data-theme="c" data-transition="pop" UseSubmitBahavior="false" href="#" data-mini="true" OnClientClick="SelectOptions()">GO</asp:LinkButton>
</form>
When I click the linkbutton this function fires: SelectOptions()
I am trying to empty the second dropdown list when the button is clicked. But when I add:
var frmnDDL = $('#ddlFrmnOpt');
frmnDDL.html("");
or
var frmnDDL = $('#ddlFrmnOpt');
frmnDDL.empty();
and then renavigate to the OptionForm above the dropdown is still populated.
What am I doing wrong?

I can almost guarantee that frmnDDL.length is 0.
.Net renames controls to something like ctl00_MainContent_ddlFrmnOpt
You have two options
you can change your jquery selector to the actual generated name (inspect the rendered html)
you can change your selector to do a partial match with something like $("[id$=ddlFrmnOpt]") or $("select[id$=ddlFrmnOpt]")
After that there are many ways to empty the select
frmnDDL.empty();
frmnDDL.children().remove();
frmnDDL.find('option').remove();
//etc, etc
Secondly, I'm confused by what you mean when you say "and then renavigate to the OptionForm above the dropdown is still populated." If you are performing a postback, .net will reload the dropdown with it's data during it's page lifecycle. What you changed in the DOM was client side, and with the web being stateless, those changes aren't remembered between postbacks.

As #CaffGeek pointed out, your issue is the fact that ASP.NET uses the control's parent hierarchy to determine the rendered ID. You can continue using the Javascript and jQuery code you already have by using static IDs for your controls.
Try
<asp:DropDownList runat="server" ClientIDMode="Static" ID="ddlLocJobPhOpt" data-mini="true"></asp:DropDownList>
and
<asp:DropDownList runat="server" ClientIDMode="Static" ID="ddlFrmnOpt" data-mini="true"></asp:DropDownList>
As of .NET 4, adding
ClientIdMode="Static"
to any server side control tells ASP.NET to render the exact ID that you specified in your markup instead of rendering it based on its legacy rules.
See http://msdn.microsoft.com/en-us/library/system.web.ui.control.clientidmode(v=vs.110).aspx

Check this Fiddle
$('button').click(function(){
$('#mySelect option').each(function(){
$(this).remove();
});
});