Develop Reference

Getting JavaScript Error in master page using ASP.NET WEB Form

Java Script not working in Content page using ASP.NET C# and I am trying to count the character of multi-line text box below is character count code.
Getting Below error.
Failed to load resource: the server responded with a status of 404
(Not Found) Uncaught ReferenceError: txtComments is not defined(…)
Below is my code JS and Design code.
<script type="text/javascript">
function characterCounter(controlId, countControlId, maxCharlimit) {
if (controlId.value.length > maxCharlimit)
controlId.value = controlId.value.substring(0, maxCharlimit);
else countControlId.value = maxCharlimit - controlId.value.length;
}
</script>
<fieldset style="width: 280px;">
<legend>Counting Remaining Characters example</legend>
<asp:TextBox ID="txtComments" Width="280px" Rows="4" Columns="12" runat="server"
TextMode="MultiLine" onkeyup="characterCounter(txtComments, this.form.remCount, 150);"
onkeydown="characterCounter(txtComments, this.form.remCount, 150);" /><input type="text"
name="remCount" size="3" maxlength="3" value="150" readonly="readonly" />
characters left
</fieldset>
When I am trying to type some thing values is not changing.

You need to pass this instead of txtComments
<asp:TextBox ID="txtComments" Width="280px" Rows="4" Columns="12" runat="server"
TextMode="MultiLine" onkeyup="characterCounter(this, this.form.remCount, 150);"
onkeydown="characterCounter(this, this.form.remCount, 150);" />

I suggest you to use this instead for the textbox ID, because the id will changed with respect to the page name(as well as the master page name if any) since it is a server side control. Which means the calling method will looks like this :
onkeydown="characterCounter(this, this.form.remCount, 150);"
Additional note: Since you are accessing the value of the Textbox from the javascript method, you need not to pass the ID of the textbox instead of that you can pass it as TextBox. so the passing parameter would be this not this.Id. and have to say thanks to Leopard for pointing this;

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

Getting a AJAX CalendarExtender value from a textbox using javascript

I would like to know how to read the value from the TextBox and assign to another TextBox on button click. This TextBox is attached to the AJAX CalendarExtender. So far I have this. I need this on ShowDate() function in Javascript.
<asp:TextBox ID="txtStartDate" runat="server" ReadOnly="false" Height="28px" Width="283px"></asp:TextBox>
<asp:CalendarExtender ID="ClendarExtender" BehaviorID="CE1" TargetControlID="txtStartDate" runat="server">
</asp:CalendarExtender>
<br />
<asp:TextBox ID="txtShowMessage" runat="server" Height="76px"
style="margin-left: 336px" Width="306px"></asp:TextBox>
<br />
<br />
<asp:Button ID="btnCreateNote" runat="server" OnClientClick="showDate()" style="margin-left: 456px"
Text="Button" onclick="btnCreateNote_Click" />
<br />
then my js is
function showDate() {
var txtDate = document.getElementById('<%=txtStartDate.ClientID %>');
document.getElementById("txtShowMessage").value = txtDate;
}
Dont know what's wrong and no value is there in the textDate.

Try to change your Javascript showDate() method like
<script type="text/javascript" >
function showDate() {
var txtDate = document.getElementById('txtStartDate').value;
document.getElementById('txtShowMessage').value = txtDate;
}
</script>
I checked this function and it works fine, Hope it works for you.

This is because when you write runat="server" then ASP engine prepends some string from its side.
ASP.NET has a built in mechanism (INamingContainer) to ensure than you don't have multiple controls named the same. It does this by adding container prefixes.
So
<asp:TextBox ID="txtShowMessage" runat="server"></asp:TextBox>
will change to something like
<input type="text" id="ctl00_ctl00_txtShowMessage" runat="server" />
So just document.getElementById('txtShowMessage') won't work. You need to get the complete ID. So you can use document.queryselector('[id$=txtShowMessage]'). This means get the element whose ID is ending with txtShowMessage.
Otherwise you can do like this
document.getElementById('<%=txtShowMessage.ClientID %>');
Note
1. The second approach I mentioned is better (Using the ClientID).
2. If you want to know the complete ID, then go to the webpage and view it's source, locate that TextField and check the ID (It won't change everytime, thats fixed)
3. For more information Refer here

How Do I Pass ASP.NET Control Name to Javascript Function?

I have Googled this to death and found lots of 'answers', but none of them will work for me, so maybe you clever people could give me a 'definitive' answer?
I have a Javascript function:
function enableSaveLink() {
document.getElementById('<%= btnSaveLink.ClientID %>').removeAttribute('disabled');
}
This works fine, but obviously it is hard-coded to enable a particular control on my page. What I'd like is to be able to call this function from any control on the page, passing the name of the control I'd like to enable as a variable. So, in an ideal world, my Javascript function would look like this:
function enableControl(ctl) {
document.getElementById(ctl).removeAttribute('disabled');
}
And I'd call it like this:
<asp:button id="btnTestButton" runat="server" Text="Click Me" onclientclick="enableControl('txtTestTextbox') />
<asp:button id="txtTestTextbox" runat="server" enabled="false />
I know the way I've passed the control name would never work, but I've tried passing it in all different ways and none work, so this is just for the purposes of illustration. Can anyone tell me how to actually make this work?

You need to use the ClientID property of the control.
This will help:
<asp:button id="btnTest" runat="server" Text="Click Me"
onclientclick="enableControl('<%= lblTest.ClientID %>') />

Use the this reference (more info here):
<asp:button id="btnTest" runat="server" Text="Click Me" onclientclick="enableControl(this);" />
Then in your script:
function enableSaveLink(elem) {
elem.removeAttribute('disabled');
}
Here you are passing a reference to the object calling the function to the function, you can then just set the attribute on the element rather than finding it in the DOM.
EDIT - Just realised what your intended usage is. If you're looking to fire an event from a disabled element when clicked, then you can't do this from the element. It would need to be handled from some other enabled element. The above method works fine if you intend to disable the element when clicked - but not enable the element when clicked.
EDIT - Just to accompany my comment, if you have a uniform structure like this (i.e. where all inputs have a corresponding label - or even button) then:
<div>
<label onclick="activateSibling(this);">Input One:</label>
<input type="text" />
</div>
You could try this:
function activateSibling(label) {
label.nextSibling.removeAttribute("disabled");
}
I've made a jsFiddle demonstrating my concept in jQuery which seems to work fine.
EDIT - OK, last idea. What about custom attributes. You could add a target attribute to your clickable element which contains the Id you're going to enable, like so:
<label target="active_me" onclick="activate(this);">Click to activate</label>
<input type="text" id="active_me" disabled="disabled" />
And your script:
function activate(label) {
var inputId = this.getAttribute("target");
var input = document.getElementById(inputId);
input.removeAttribute("disabled");
}
Although, it's starting to feel like we're fighting against the technology a little and we're not too far removed from ctrlInput.ClientID. But I suppose this makes your markup a little cleaner and gives you a function that's bindable en masse.

Ok, I've cracked it. There are probably more ways than one to do this, but this is fairly elegant.
My Javascript function:
function enableControl(ctl) {
document.getElementById(ctl).removeAttribute('disabled');
}
My ASP.NET markup:
<asp:Button ID="btnTestButton" runat="server" Text="Click to enable" OnClientClick="enableControl('txtTestTextbox');" />
<asp:TextBox ID="txtTestTextBox" runat="server" enabled="false" ClientIDMode="Static" />
The key is the ClientIDMode property, which, when set to static, means that the control's client-side ID when it is rendered will match the ID you give it in markup. If it's within a naming container you may need to include that in the variable passed in the function call. See here for more info about ClientIDMode.
Anyway, this works for me! Thanks for your input, everyone.

ClientID is used for getting server side control on javascript.
var element=document.getElementById('<%=lblTest.ClientID%>');

Editing a labels text value through JavaScript

I have a simple in VB/ASP.NET form containing two text boxes, I am attempting to apply some validation to the first text box using JavaScript. This is the first time I have attempted this and am having some trouble.
I have a label beside the text box stating an error, this labels visibility property is set to False. I wish the labels visibility to turn true if the text box is empty when the user loses focus.
For this I have used the onBlur option within the tags of the text box. It then calls the JavaScript function and should set the label to Visible but it does not. I have tested to see if it is entering the function by using an alert instead and that works. The problem seems to be trying to alter the visibility property of the label.
Here is the portion of my code:
The JavaScript:
function myRegEx(frm) {
if ( boxUsername.value == "" ) {
invalidUser.visible = True;
return false;
}
}
The form:
<asp:TextBox onblur="return myRegEx(this)" id="boxUsername" runat="server" Width="200px"></asp:TextBox>
<asp:Label id="invalidUser" runat="server" visible="False" forecolor="Red" text="* Username must be alphanumeric with no special characters"></asp:Label>
Any help would be brilliant.

Here's another StackOverflow question that has the answer for you:
Change visibility of ASP.NET label with JavaScript

I suggest you use and ASP.Net Validation control, specifically the RequiredFieldValidator.
This will take care of the label for you, plus make certain the correct validation happens both client side (javascript) and server-side (vb).

You're using the deprecated IE-only feature that turns elements with IDs into global variables.
You should call document.getElemenntById instead.
Also, you need to use ASP.Net's generated client IDs.
Finally, to hide an element, you need to use CSS; HTML doesn't have a visible property.
For example:
document.getElementById("<%=invalidUser.ClientID %>").style.display = "none";
However, you should use ASP.Net's built-in validation feature instead.

Why not use an ASP.NET RequiredFieldValidator like so:
<asp:TextBox onblur="return myRegEx(this)" id="boxUsername" runat="server" Width="200px"></asp:TextBox>
<asp:RequiredFieldValidator ControlToValidate="boxUsername" Display="Dynamic" ErrorMessage="Please enter a value" />
If that is too simplistic then you can use a RegularExpressionValidator:
<asp:TextBox onblur="return myRegEx(this)" id="boxUsername" runat="server" Width="200px"></asp:TextBox>
<asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ErrorMessage="Please enter alpha numeric characters." ValidationExpression="[my reg ex]" ControlToValidate="boxUsername" Display="Dynamic" />