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 %>')

How to set dropdown value placed inside <tr> tag using its value using jQuery

I'm using a dropdown list inside tag
<td id="tdStatus" runat="server">
<asp:DropDownList ID="ddlStatus" runat="server" AutoPostBack="false">
</asp:DropDownList>
</td>
Now I need to select a particular item based on value returned from database.
I stored the value in variable ddl.
How can I identify this dropdown and select value using jQuery..?
I used the following code also, but not working..
$('#dropdownID').val("Value to be selected");

You should try this one:
$('#<%=ddlStatus.ClientID%>').val("Value to be selected");
The id of the dropdown in the markup that is generated by asp.net's view engine differs from the id you define in your markup, in order to access your server side control in your code behind class.

You are having ID attribute for td element. you can use:
$('#tdStatus select').val('set new val');

Access ASP.NET Literal value from Javascript

How can I access the value of an ASP.NET Literal control from JS. I have the below but it doesn't work:
var companyname = document.getElementById('litCompanyName').text;
var companynumber = document.getElementById('litCompanyNumber').text;
Thanks

You must public your literal in a webform/view, because you can't public asp.net code in .js files, you can do something like this:
<script>
var litCompanyName = <%= [YOUR LITERAL]; %>
</script>
and then use it

In Asp.net When Page is Going to Rendered it will change its ID in Html.
Check Html of Page using FireBug in Mozilla Firefox.
example of label
<asp:Label ID="SaveTime" runat="server"></asp:Label>
var companynumber= document.getElementById('<%=SaveTime.ClientID%>').Text
and For Literal You Need to Wrap with div or span
<span id="yourId"><asp:Literal ID="SaveTime" runat="server"></asp:Literal></span>
js:
var value= document.getElementById('yourId').innerText;

The short answer is that you can't. A literal control is just that. The value in the Text property is 'literally' outputted to the response stream.
You can either set a hidden field or use a Label. Just remember, referencing ASP.NET controls from Javascript, it's easier to use ClientIDMode="Static" or wrap your literal in a span with an ID.
For example:
litCompanyName.Text = "<span id=\"company-name\"> + Company.Name + </span>";
Then in your JS
var companyname = document.getElementById('company-name').text;

The literal control only exists on the server side, when the page is rendered it's only the text of the control that ends up in the page. So if you have:
The company name is <asp:Literal ID="litCompanyName" runat="server" Text="Google" />
all that ends up in the HTML code is:
The company name is Google
To access the text from Javascript you need an element around the text, for example:
<span id="CompanyName"><asp:Literal ID="litCompanyName" runat="server" /></span>
Now you can use document.getElementById('CompanyName').innerHTML to get the text from the literal.

Assigning value of JS code to DIV

I'm trying to get a variable in JS code to be displayed within a DIV within a table. I've cut the code down for simplicity just trying to get this working properly.
Firebug is reporting:
document.getElementById("valuelabel") is null
Here is the code:
<table>
<tbody>
<tr>
<td>
Value:
</td>
<td>
<div id="valuelabel"></div>
</td>
</tr>
</tbody>
</table>
<script language="javascript" type="text/javascript">
var mktValue = "12000";
document.getElementById("valuelabel").value = mktValue;
</script>
The mktValue will be a dynamically assigned numeric value; a textbox entry from another form. I just put "12000" in for testing purposes.
Within Firebug, it's shows the following for the dynamically assigned value.
var mktValue = '120700';
Thanks..

Divs don't have a "value", they do however have "innerHTML"
document.getElementById("valuelabel").innerHTML = mktValue;

div elements don't have a value (only form fields do). You can set the div's content via textContent (just text) or via innerHTML (HTML):
document.getElementById("target1").textContent = "This is normal text, <and> aren't special here.";
document.getElementById("target2").innerHTML = "This is HTML text, so <strong>tags</strong> are rendered as elements.";
<div id="target1"></div>
<div id="target2"></div>

you can use jquery to insert value into the specific id by using
$("#valuelabel").html(mktValue)

Update textfield based on combobox selection using JQuery - accessing list problem

I have a Spring MVC application, use JSP+JQuery for view, and what I need is to, based on combo box selection (which gets me an index of element in list) to populate text field.
listProduct - list of products that is in the model
<form:form method="POST" commandName="productForm" name="insertRacun">
<table>
<tr>
<td class="ui-widget">Product:</td>
<td><form:select path="productListId" id="productCombobox">
<form:options items="${listProduct}"itemLabel="name" itemValue="productId"/>
</form:select>
</td>
<td class="ui-widget">Product price:</td>
<td><form:input path="priceList"
class="ui-widget ui-widget-content" id="priceInput" />
</td>
<script type="text/javascript">
var comboIndex = $("#productCombobox").val();
$("#priceInput").val(${listProduct[comboIndex].price})
});
</script>
My question is: When i put number in listProduct[] i.e. listProduct[0] it works just fine and price field gets populated, but when i want put "comboIndex" in brackets, it does nothing.
If there is another solution (not using JQuery), please post it

You are mixing client and server side code. You cannot pass a JS variable to your server code, as your server code is parsed before the page has been served up to the client.
You will need to pass the price corresponding to a particular product ID to the client by other means.

The relevant code (probably in a change event handler) should reference productCombobox selectedIndex instead:
var comboIndex = $("#productCombobox").attr("selectedIndex"); //
$("#priceInput").val(${listProduct[comboIndex].price});