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.

Dynamic forms AUI Liferay

I am doing a portlet in Liferay with a form like this:
<form method="post" action="<%=actionAddRule.toString() %>" id="myForm" >
<aui:select name="attribute" style="float: left;">
<c:forEach var="attr" items="${fields}">
<aui:option value="${attr}" selected="${condition.attribute==attr}">${attr}</aui:option>
</c:forEach>
</aui:select>
<aui:input type='button' value="Add Condition" name='addCondition' onClick="addCondition();" %>'></aui:input>
<div id='conditions'></div>
</form>
I want that when someone click the button add a new select, but I don't know how do a new . I tried do it with JavaScript with:
var conditions = document.getElementById('conditions');
conditions.innerHTML('<aui:select ...>...</aui:select>');
and
document.createElement('<aui:select>');
I tried too with AUI script doing:
var nodeObject = A.one('#divAtr');
nodeObject.html('<aui:input type="text" name="segment21" label="Segment" value="lalal" />');
But it doesn't work because is html and doesn't can make AUI, and if I make the new select with HTML normal, when I catch the values some are lost.
Thanks.

As #Baxtheman stated, this won't work because the tag is not a client-side HTML tag, but a server-side tag from the aui-taglib.
To dynamically load the contents of the select box you would want to follow these steps:
add an element in your JSP, but make it hidden
<aui:select id="conditions" style="display: none;"><aui:select>
From your javascript, when the event occurs that you want to use to load your second select box, you would select the dropdown box and add the options you wish to it with something like the answer from this post Adding options to select with javascript
Make sure you set the select box to be visible after loading the options.
document.getElementById('<portlet:namespace/>conditions').style.display = 'block';
For more clarity, the reason you're missing information on POST if you add a normal HTML select box, is because of the way the aui:form serializes the data. I believe the ends up with a custom onSubmit that gathers only the aui elements.

<aui:select> is a JSP taglib, not the final HTML markup.
If you understand this, you resolve.

How to set the text of a button using JScript?

I'm trying to set the text on a button in a JScript function. I am using a JScript function like this...
function myfunction(sender, eventArgs)
{
wanted_text = window.source_text_field.get_displayText();
if (document.getElementById("my_span_element") != null)
{
document.getElementById("my_span_element").innerText = wanted_text;
}
if (document.getElementById("my_button") != null)
{
document.getElementById("my_button").text = wanted_text;
}
}
where the controls concerned are define like this...
<span id="my_span_element" class="some_class"></span>
<asp:Button id="my_button"
runat="server"
class="some_other_class"
text=""
Width="48"
Height="25"
onclick="do_foo"/>
The text in the span element is set correctly but the button is unaffected. I've also tried innerText, Value, Text, and also attempted to use the answer to this question but to no avail.
Can anyone see what I have overlooked?

Change the .value attribute of button:
document.getElementById("my_button").value = "new value";

ASP.Net generates its own IDs for server controls.
You need to write <%= my_button.ClientID %> to get this generated ID.

There are 2 problems here:
First: you use wrong attribute - should be "value", instead of "text"
Second: document.getElementById("my_button") will not work because ASP.NET assigns it's own ids to controls. If you take a look at generated markup you will notice that id of the element is completely different.
If your javascript is inside of the same .aspx page as <asp:button /> control, you can do like this:
document.getElementById("<%= my_button.ClientID %>").value = "some text";

Set ASP Literal text with Javascript

I have an asp:Literal on my page (which cannot be converted to a Label or any other control) that I need to change the text of via JavaScript. I have the following code that works for a Label. Can anybody help?
<script type="text/javascript">
function changeText() {
document.getElementById('<%= Test.ClientID %>').innerHTML = 'New Text';
}
</script>
<a href="#" onclick='changeText()'>Change Text</a>
<asp:Label id="Test" runat="server" Text="Original Text" />
Thanks
UPDATE:
I cannot change from a literal as the code behind writes HTML/CSS to it for an Information Message e.g:
LITMessage.Text = "<div class='success'>Information Successfully Updated</div>"

<asp:Literal> controls don't create their own HTML tag.
Therefore, there is no element that you can manipulate.
Instead, you can wrap the <asp:Literal> in a <div> tag with an ID.

An ASP.NET Literal doesn't add any markup to the page. Therefore you have to wrap your content in some container so that you can edit it via JavaScript:
Assuming you had the following Literal on the page:
<asp:Literal runat="server" Id="literalControl" />
And were setting the text via code behind (because if you're not, you could just create the span/div in the markup to begin with and not have this issue):
literalControl.Text = "Some text you want to change";
The code behind becomes:
literalControl.Text = "<span id='myId'>Some text you want to change</span>";
And the JavaScript would be:
document.getElementById('myId').innerHTML = 'New Text';

Does the literal contain html markup?
if not, you could wrap the literal control in a div and give it an id. Then use js to replace the text within that div.
in response to your update:
In that case, since you are rendering a div with a class of success, I would use jQuery to update the html in that div...it would be as simple as:
$('.success').html('new html goes here');

Wrap the <asp:literal> control in a <div> and then use jQuery if needed to clear the contents like shown below:
<div id="divMyText">
<asp:Literal ID="MyText" runat="server"></asp:Literal>
</div>
Here is how to clear the text using jQuery:
//Clear the html inside of the div
$("#divMyText").html("");

A Literal is a direct render of text to the page. The only HTML it will render will be the HTML markup you include in the text string you set to the Literal. Instead of using a Literal surrounded by a div (unless you specifically want that functionality) you can use an ASP Label and perform operations on it.