We Keep Coding

System.Web.HttpException: 'Cannot have multiple items selected in a DropDownList

I realise that this question has been asked in various forms a number of times, but I have not found a solution that solves my issue.
I am writing a web site to record details of dead people. My web page has a title drop down box and a sex drop down box.
In the database, these are linked and I need to set the sex based on the title.
I have a list box that contains the title id / sex id link and a function to look up the sex from the title using this list box.
<asp:Label CssClass="LegacyLabel">Title</asp:Label>
<asp:ListBox ID="TitleSex" runat="server" CssClass="hidethis" SelectionMode="Single"></asp:ListBox>
<asp:DropDownList ID="LegatorTitle" runat="server" CssClass="LegacyDDL" TabIndex="2" onchange="setSex()"></asp:DropDownList>
<asp:Label CssClass="LegacyLabel">Sex</asp:Label>
<asp:DropDownList ID="LegatorSex" runat="server" CssClass="LegacyDDL" TabIndex="5"></asp:DropDownList>
<script>
function setSex() {
var t = document.getelementbyid("<%=LegatorTitle.ClientID %>");
var ts = document.getElementById("<%=TitleSex.ClientID %>");
var s = document.getElementById("<%=LegatorSex.ClientID %>");
//get title selectd value
var tValue = t.options[t.selectedIndex].value;
var opts = ts.options;
//set the title sex selected value
ts.selectedItem.selected = false;
for (var z0 = 0; z0 < opts.length; z0++) {
if (opts[z0].value == tValue) {
ts.selectedIndex = z0;
break;
}
}
//get the title sex selected text
var tsText = ts.options[ts.selectedIndex].text;
opts = s.options;
//set the sex selected value
s.selectedItem.selected = false;
for (z0 = 0; z0 < opts.length; z0++) {
if (opts[z0].value == tsText) {
s.selectedIndex = z0;
break;
}
}
}
</script>
The drop down lists and list box are set from a web service using datatables
dataTable = fcws.GetTitles(UNAME, PWORD)
LegatorTitle.Items.Clear()
LegatorTitle.DataSource = dataTable
LegatorTitle.DataTextField = "TitleName"
LegatorTitle.DataValueField = "TitleId"
LegatorTitle.DataBind()
TitleSex.Items.Clear()
TitleSex.DataSource = dataTable
TitleSex.DataTextField = "SexId"
TitleSex.DataValueField = "TitleId"
TitleSex.DataBind()
dataTable = fcws.GetTitles(UNAME, PWORD)
LegatorTitle.Items.Clear()
LegatorTitle.DataSource = dataTable
LegatorTitle.DataTextField = "TitleName"
LegatorTitle.DataValueField = "TitleId"
LegatorTitle.DataBind()
'sex
dataTable = fcws.GetSexes(UNAME, PWORD)
LegatorSex.Items.Clear()
LegatorSex.DataSource = dataTable
LegatorSex.DataTextField = "SexName"
LegatorSex.DataValueField = "SexId"
LegatorSex.DataBind()
I also have case opened and case closed dates and a status (drop down list with Open and Close options)
When I try to load an open case, everything works perfectly
When I try to load a closed case, I get the following error
Server Error in '/' Application
Cannot have multiple items selected in a DropDownList
Source error
Line 245: var t = document.getelementbyid("<%=LegatorTitle.ClientID %>");
Line 246: var ts = document.getElementById("<%=TitleSex.ClientID %>");
--> Line 247: var s = document.getElementById("<%=LegatorSex.ClientID %>"); <---
Line 248: //get title selected value
Line 249: var tValue = t.options[t.selectedIndex].value;
(--> ... <-- is highlighted line)
I cannot post images yet so here is a link to the error
What I don't understand is: -
why the error occurs in the first place
why the error is only occurring for closed cases
why, when I change the line
'var s = document.getElementById("<%=LegatorSex.ClientID %>");' to 'var s = document.getElementById("LegatorSex");', the error moves to the line var ts = document.getElementById("<%=TitleSex.ClientID %>");
(if I change all the lines in the above code, the error moves to the previous line with <%=xxx.ClientID %>)
I have checked responses that were helpful (that is why I clear the lists before binding to them and why I set the selectedItem.selected to false before re-setting it) to the downright unhelpful (The error is pretty specific: You can't have multiple selections in a drop down list. Find another control which fits your needs better!) but nothing seems to work.

I have found the answer
(and I feel a bit stupid that I didn't spot this before...)
As part of the job, I had to default the case status to open for new cases. The code I added to set the case status to open was being run for all cases, not just new ones.
Open cases worked fine because the selection was already set to "open"
Many thanks for your input and very sorry for wasting your time over my stupidity
I still have no idea why the error reports the failing line as one with
'getelementbyid("<%=xxx.ClientID %>");'

Asp.Net Control Value return undefined in Jquery

In my project i need change visible of dynamic asp control when click label based on textbox values. So i first tried to get textbox value when click label but its return undefined. I am search and get two methods i tried that also it return same.
My Try :
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$(document).on("click", "#lblShow", function() {
alert($('#<%=txtTotalVersion.ClientID%>').val());
alert($('input[id$=txtTotalVersion]').val());
var xTotlal =$('#<%=txtTotalVersion.ClientID%>').val()
var i = 0;
for (i = 0; i < xTotlal; i++) {
$('#createDiv' + i).style.display = "blcok";
$('#createDiv1' + i).style.display = "block";
$('#createDiv2' + i).style.display = "block";
$('#createDiv3' + i).style.display = "block";
}
});
});
</script>
HTML
<div id="DivCompName">
<asp:TextBox runat=server ID="txtTotalVersion" Visible="false"></asp:TextBox>
<asp:TextBox runat=server ID="txtCurrentDisplay" Visible="false"></asp:TextBox>
</div>
First two alert return undefined.

Visible="false" is asp.net attribute, in this case your control will not be rendered at the client side. So your client script won't find the control as it doesn't exists!
If you want to store some value at client side and don't want to display it then you can use HiddenFields or you can make the same control hidden by using css style display:none;. (Don't use Visible="false" for this)

you can add ClientIDMode=Static and call it from your jquery
<asp:TextBox runat=server ID="txtTotalVersion" Visible="false" ClientIDMode="Static"></asp:TextBox>
<script>
$(document).ready(function () {
alert("#txtTotalVersion").val();
})
</script>
reason is, the client id for your control might not be as it is assigned with ID="xxx", if the control is inside of another asp.net server control, after adding the ClientIDMode, you are telling your server to treat this control with a static ID
to learn more: msdn

DIV content inside Repeater not controllable

Inside a repeater's ItemTemplate, I have..
retstr.AppendLine("<div id='contentDivImg' style='display: block;'><img src = '" & img_src & "' /></div>")
Every image needs to hide and show when the toggle button/link is pressed. Although, only the first IMAGE/DIV toggles visibility, none of the following images whose paths are also gotten from the database by the line of code above. Why? I've tried using class instead of id parameter.
Here is the javascript only if interested..
<script type="text/javascript">
function toggle(showHideDiv, switchImgTag) {
var ele = document.getElementById(showHideDiv);
var imageEle = document.getElementById(switchImgTag);
if (ele.style.display == "block") {
ele.style.display = "none";
imageEle.innerHTML = '<img src="/images/Show.png">';
}
else {
ele.style.display = "block";
imageEle.innerHTML = '<img src="/images/Hide.png">';
}
}
</script>
And, here is the simple toggle link to show and hide the conntentDivImage when clicked..
<a id="imageDivLink" href="javascript:toggle('contentDivImg', 'imageDivLink');"><img src="/images/Hide.png"></a>

getElementById only returns the first element by that ID, and so therefore the 1st one is the only one that is going to work according to your code. I would add a counter for use in your ItemTemplates to give each div a unique ID, like contentDivImg1 and contentDivImg2, and then when you have the ItemTemplate for the anchor tag, make sure to reference the right one when calling your javascript function.

The problem is that, in HTML, IDs are meant to be unique. document.getElementById() stops after finding the first element with a matching ID. In this case, it finds the first <div> and ignores the rest of the page.
However, you can change the way that you use your repeater to better suit your needs:
If you restructure your repeater to look more like this:
<!-- the repeater now has an OnItemDataBound event -->
<asp:Repeater runat="server" ID="rptDivs" OnItemDataBound="rptDivs_OnItemDataBound">
<ItemTemplate>
<!-- The <div>, <img>, and <a> tags have runat="server". This is important. -->
<div runat="server" ID="div"><img runat="server" ID="img" />
<a id="a" runat="server"><img src="/Images/Hide.png" id="img2" runat="server" /></a>
</div>
</ItemTemplate>
</asp:Repeater>
...then each <div> and <img /> within the repeater will have a unique id. The ID will look something like this: ``.
You will need to add an event to your page's code behind to set the properties (such as src) for your HTML. Since you've added the OnItemDataBound event to the repeater, you can access the objects in your code behind (this is in C#, but the idea will still work in VB).
protected void rptDivs_OnItemDataBound(object sender, RepeaterItemEventArgs e)
{
// first, let's get the item that you have bound to your repeater
MyObject myObject = (MyObject)e.Item.DataItem;
// You can access the image and div objects here because they are set to runat="server"
HtmlImage img = (HtmlImage)e.Item.FindControl("img");
HtmlImage buttonImg = (HtmlImage)e.Item.FindControl("img2");
HtmlAnchor a = (HtmlAnchor)e.Item.FindControl("a");
HtmlGenericControl div = (HtmlGenericControl)e.Item.FindControl("div");
// you can now set the properties of the HTML in your code-behind
img.Src = myObject.imgSrc;
a.Attributes["onclick"] = "javascript:toggle('" + div.ID + "', '" + buttonImg.ID + "');";
}
The HTML output of each repeated element might now look something like this:
<div ID="body_body_div_1"><img ID="body_body_img_1" />
<a id="body_body_a_1" onclick="javascript:toggle('body_body_div_1', 'body_body_img_1');"><img src="/Images/Hide.png" id="body_body_img2_1" runat="server" /></a>
</div>
...with the ID's changing between each repeated element.

Show/Hide Database Field based on Null/Not Null ASP.NET

I am trying to hide a data field if it is null via ASP.NET.
I have the following setup:
<script runat="server" type="text/vb">
// target the id called test
var test = document.getElementById("test");
// if test is not empty, show
// else hide test
if (test.value != null){
document.getElementById("test").style.visibility = visible;
}else{
document.getElementById("test").style.visibility = hidden;
}
<p><asp:Label runat="server" id="test"><%# Eval("DBField")%></asp:Label></p>
Am I way off here? I am getting error in whatever I try. I don't think it should be so complicated however...any thoughts/recommendations would be greatly appreciated.
Thank you in advanced,

Without knowing what your error is it's hard to give you an answer. One thing that jumps out is that you are not using the ClientId of the asp.net control. Try changing this:
var test = document.getElementById("test");
to this:
var test = document.getElementById("<%=test.ClientID%>");
When you assign an ID to an asp.net control, that is not the ID that gets rendered. Give this article a read for more info on that.

There are a few possible issues here:
Since you are using a server control, depending on what its parent is, the ASP.NET runtime could be changing its ID. If you View Source on your page it may show an ID like "ctl00_main_test" or something similar. To get aroud this you have to do the followinh:
var test = document.getElementById("<%= test.ClientID %>");
if (test.text != null){
test.style.visibility = 'visible';
}else{
test.style..visibility = 'hidden';
}
Since "visibility" maps to a CSS style, you probably have to use quotes around "visible" and "hidden"
Lastly, getElementByID should work well for all modern browsers, but older browsers could have flaky implementations. I suggest looking at jquery to simplify this code:
if ( $('#<%=test.ClientID>').text() != '' && $('#<%=test.ClientID%>').text() != null){
$('#<%=test.ClientID%>').show();
}else{
$('#<%=test.ClientID%>').hide();
}

You need to test against empty string in JavaScript, like this:
var test = document.getElementById("<%=test.ClientID%>");
if (test){
test.style.visibility = (test.value == "" ? "hidden" : "visible");
}
EDIT
I just noticed that you're using databinding syntax, which makes me think that this Label is inside of a grid or something. You can try something like this instead:
<asp:Label ID="test" runat="server" Visible='<%#(String.IsNullOrEmpty(Eval("DBField")) == false)%>'><%#Eval("DBField")</asp:Label>

I was able to hide data via the following code:
<asp:PlaceHolder ID="PlaceHolder" runat="server" Visible='<%# IIf((Eval("test")).ToString().Length > 0, "true", "false") %>'>
<h3>test</h3>
<asp:Label ID="test" runat="server" Text='<%# Bind("test") %>'></asp:Label>
</asp:PlaceHolder>

Span tags do not have a value:
if ($('#<%=test.ClientID%>').html() != "") //jQuery
or
if (document.getElementById("<%=test.ClientID%>").innerText != "")

How to use Javascript to get ASP.NEt Web Forms label's value?

I have the following label control:
<asp:Label ForeColor="DarkGreen" runat="server" ID="lblStatus"></asp:Label>
Its value is filled in the Page_Load event.
I attached the following Javascript (placed at the end of the page, not Master page):
function Validate() {
var lblObj = document.getElementById('<%=lblStatus.ClientID%>');
alert(lblObj.value);
if (lblObj.value == "Replaced" || lblObj.value == 'Trashed' || lblObj.value == "Internal Use") {
alert("Products with" + lblObj.value + "status cannot be reserved");
return false;
}
}
The alert(lblObj.value) displays a popup with text "undefined". How can I fix this problem? Please, I tried many combinations for placing the JavaScript but no luck! Thanks
UPDATE
Browser soruce code:
<span id="ctl00__main_lblStatus" style="color:DarkGreen;">Available</span></td>
First line of Validate JS function:
function Validate() {
var lblObj = document.getElementById('ctl00__main_lblStatus');

labels don't have a value. They have innerHTML and innerText.

Use JQuery and it will run in all browsers and platforms, something like:
$('#<%= lblStatus.ClientID %>').next().text();
source: JQuery: getting the value/text/innerHtml of a checkbox in an ASP.NET CheckBoxList control

Label server control renders as span. So you should get it's content by innerText. try this :
alert(lblObj.innerText);

ASP.NET label server control will be rendered in complex HTML output.
Like:
<span id="ctl00_ctl00_ContentPlaceHolder1_BodyPlaceHolder_lblLanguage0">
<label class="inputText">English</label>
</span>
When you use getElementById you will get span.
But to set value via javascript you have to access inner label object

try this
<script language="javascript" type="text/javascript">
function getlabelvalue()
{
var value1 = document.getElementById('<%=labelID.ClientID%>').value;
if (value1.length < 1)
value1 = 0;
}
</script>

With jquery you need to use the html method.
var g = $('#<%=lblStatus.ClientID%>').html();
These will NOT work with jquery:
$('#<%=lblStatus.ClientID%>').innerText
$('#<%=lblStatus.ClientID%>').innerHTML
$('#<%=lblStatus.ClientID%>').val()