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

JQuery ASP hidden issues

Depending on the result of a checkbox, I want to hide/reveal a hidden table (hidden from page load), asking for more information.
The JQuery and ASP is below, can someone point me in the right direction and let me know what I'm doing wrong with this approach.
ASP
<h3>Table Heading</h3>
<asp:Table ID="tbl1" runat="server">
<asp:TableHeaderRow>
<asp:TableHeaderCell>
<h4>One</h4>
</asp:TableHeaderCell>
</asp:TableHeaderRow>
<asp:TableRow>
<asp:TableCell>
<asp:CheckBox ID=""Yes" runat="server" Checked="false" Text="Yes" />
<asp:CheckBox ID="No" Text="No" runat="server" Checked="false" />
</asp:TableCell>
</asp:TableRow>
</asp:Table>
<asp:Table ID="tbl2" runat="server" Visible="false">
<asp:TableHeaderRow>
<asp:TableHeaderCell>
<h4>Additional information</h4>
</asp:TableHeaderCell>
</asp:TableHeaderRow>
<asp:TableRow>
<asp:TableCell><asp:TextBox ID="AddInfo" runat="server" TextMode="MultiLine"></asp:TextBox></asp:TableCell>
</asp:TableRow>
</asp:Table>
JQuery
<script type="text/javascript">
function toggleTable()
{
$(function () {
$("#Yes").click(function () {
$("#tbl2").show();
})
$("#No").click(function () {
$("#tbl2").hide();
})
}
</script>
Update 1
As suggested I removed the wrapping function, this still didn't work.
<script type="text/javascript">
$(function ()
{
$("#Yes").click(function () {
$("#tbl2").show();
})
$("No").click(function () {
$("#tbl2").hide();
})
})
</script>
Raw HTML
<h3></h3>
<table id="MainContent_tbl1">
<tr>
<th>
<h4></h4>
</th>
</tr><tr>
<td><input id="MainContent_Yes" type="radio" name="ctl00$MainContent$Yes" value="Yes" />
<label for="MainContent_Yes">Yes</label><input id="MainContent_No" type="radio" name="ctl00$MainContent$No" value="No" />
<label for="MainContent_No">No</label></td>
</tr>

When you had used visible=false in server control, that had done this - It removed that control entirely from page when rendered.
More about Visible property - If this property is false, the server
control is not rendered. You should take this into account when
organizing the layout of your page. If a container control is not
rendered, any controls that it contains will not be rendered even if
you set the Visible property of an individual control to true. - http://msdn.microsoft.com/en-us/library/system.web.ui.control.visible(v=vs.100).aspx
So i would suggest, if you are doing show/hide from server side code, then set attribute (CSS) style= display none . If you directly use visible property and set it to false, it will remove control from page, there will be no way to show in page.
E.g. tbl1.Attributes.Add("style", "display:none");
In client-side hide it using style=display:none" instead of visible=false.
Also, ,use .ClientID to get exact render ID for jquery selector. Like
$("#<%=tbl1.ClientID%>").show();

Take away the toggleTable() wrapping function and it should work as you've suggested.
The $(function () { runs when the document is ready and should turn on the click listeners at that point.
I'd also point out that the logic is flawed. Checkboxes can all be turned on so you might want to use radio buttons instead so only one can be checked.

In your jquery get everthing by ClientID as it is asp it will rename it(as you can see it has added MainContent_ to your control ids) so do this :
$("<%=tbl2.ClientID %>").click{....
Or add ClientIDMode = "Static" to your controls e.g.:
<asp:Table ID="tbl1" runat="server" ClientIDMode = "Static">

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();
});
});

How to get the user control textbox value in aspx page?

I have a User control ascx file with a textbox in it
<asp:TextBox ID="textboxDate" runat="server" CssClass="FieldValue" MaxLength="10"
Columns="12" autocomplete="off" Style="padding-right: 18px; border: 1px solid #567890;" />
<ajaxToolkit:CalendarExtender ID="calendarExtenderDate" runat="server" TargetControlID="textboxDate"
PopupButtonID="textboxDate" />
I'm adding this user control in my aspx page
<uc:DateControl ID="dateControlStart" runat="server" RequiredErrorMessage="please enter date" />
and i want the value of this textbox . How can i do this using javascript or Jquery.

Try the below
$("input[id*=textboxDate]").val();
Thanks

Try to have a public property in the user control to access the text box.
Example:
In User Control code behind
public TextBox MyTextBox{
get{return this.textboxDate;}
}
In Page code behind
dateControlStart.MyTextBox.Text

Since .NET creates it's own id's for controllers it's a bit problematic. But there's 2 ways around this.
1, create a containing div with an id.
// HTML
<div id="date-container">
//.. .NET controllers
</div>
// Script
var container = document.getElementById('date-container'),
input = container.getElementsByTagName('input')[0];
console.log(input.value);
2, Add and unique css class to you asp:textbox and use jQuery to retrive it:
$('.date-input-unique').val();

How to find and modify an asp.net control with JavaScript?

This has been bothering me for quite some time. I'm simply trying to change the value of a textbox defined in asp.net, which normally works when it is not within a LoggedInTemplate.
I've searched everywhere on the net and even here, but the only thing I can find close to doing what I need is here Finding an asp:button and asp:textbox in Javascript. Unfortunately that doesn't work. Here's what I have so far:
<head id="Head1" runat="server">
<script src="../../scripts/webeffects.js" type="text/javascript" language="javascript"></script>
</head>
<asp:LoginView ID="LoginView1" runat="server">
<LoggedInTemplate>
<div class="lotto_pick_container">
<table runat="server" id="tblLottoPick">
<tr><th colspan="3">Pick a Lotto Number</th></tr>
<tr>
<td><asp:TextBox ID="txt1stNum" runat="server"></asp:TextBox></td>
<td><asp:TextBox ID="txt2ndNum" runat="server"></asp:TextBox></td>
<td><asp:TextBox ID="txt3rdNum" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td><asp:Button ID="cmdSubmitPick" runat="server" Text="Submit Lotto Number"
onclientclick="return validateLottoPicks()" /></td>
</tr>
</table>
</div>
</LoggedInTemplate>
</asp:LoginView>
Right now I'm trying to use an external js script to find a textbox and modify it with an arbitrary value of 12, just so that I know it can work:
function validateLottoPicks() {
document.getElementById('<%= LoginView1.FindControl("txt2ndNum").ClientID %>').value = 12
}
When I debug this with Firebug it seems all my other code works, except for this one function. I have verified the function gets called, it's just this line that doesn't work. Can someone please provide some guidance? I'll send milk and cookies.
Update:
Thanks for all the help from everyone. This was my first time using Stack Overflow and I was definitely impressed by the quick responses.
It turns out my actual problem was that using <%= LoginView1.FindControl("txt2ndNum").ClientID %> does not work in external js scripts. I didn't know this. Once, I put the function in the header of my page everything worked. Now I'm going to avoid using ASP.NET controls because I don't want to deal with that again, and it makes more sense if I ever decide to use something other than ASP.NET.

The problem is that you have set visible=false on this line
<table runat="server" id="tblLottoPick" visible="false">
From that moment the controls are not rendered the javascript can not find this control. If you do not wish to show this table use css, for example style="display:none;" so its rendered but not visible. All the rest seems to me that working.
Update
From the comments also seems that this code is not inside the aspx page, so the ClientID can not work and not found. Add this somewhere in the header in the page that have this LoginView1 control.
function validateLottoPicks() {
document.getElementById('<%= LoginView1.FindControl("txt2ndNum").ClientID %>').value = 12
}

Try
tblLottoPick.FindControl("txt2ndNum").ClientID instead.

Try putting this into a javascript string variable. What are you getting?
'<%= LoginView1.FindControl("txt2ndNum").ClientID %>'
Because you shouldn't have to do that. Can you just do this?
document.getElementById('txt2ndNum')
Also, check in firebug to see what the ID value is set to for that control (i.e. the rendered textbox). I mean see what it's rendered as. You just need to get the right id.