Develop Reference

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

setting asp:RadioButton Text from javascript

I am having the following Radio butttons in my aspx file.
<asp:RadioButton ID="rdoOption1" runat="server" GroupName="grpAnswers"/>
<asp:RadioButton ID="rdoOption2" runat="server" GroupName="grpAnswers"/>
<asp:RadioButton ID="rdoOption3" runat="server" GroupName="grpAnswers"/>
<asp:RadioButton ID="rdoOption4" runat="server" GroupName="grpAnswers"/>
I want to set the text from javascript on a button's click.
Javascript code is as follows.
document.getElementById("rdoOption1").innerHTML = "sometext";
I've also tried with Text,nodevalue instead of innerHTML, no use. Plz help.

You need to use ClientID in javascript instead of using the server side id. As the server side id is changed when html is generated by asp.net. You also have : instead of semi colon at the end of javascript statement. Use value instead of innerHTML as that is not for input html elements.
document.getElementById("<%= rdoOption1.ClientID %>").value = "sometext";
If you have .Net Framework 4 and above then you can use Control.ClientIDMode="static" to keep the server id on the client side.
Edit The second thing you have to take care is to make sure the html element you are trying to access is already added to DOM. You can do this by putting the script after the html elements you are trying to access. The best place would be just before the ending body tag </body>
<script type="text/javascript>
document.getElementById("rdoOption1").innerHTML = "sometext";
</script>
</body>

Atlast I've found the solution for this.
Actually the asp:RadioButton is rendering in the browser as follows,
<input name="grpAnswers" id="rdoOption1" type="radio" value="rdoOption1"/>
<label for="rdoOption1">
Note: It'll generate label only if you specify some value for Text property of the asp:RadioButton.
So ,I have changed my code as follows,
<asp:RadioButton ID="rdoOption1" runat="server" GroupName="grpAnswers" Text=" "/>
My Javascript code to set Text for that asp:RadioButton is as follows,
document.getElementById("rdoOption1").nextSibling.innerHTML = "someText";
This one worked for me.Thanks to all those who spent their valuable time in answering my question. :)

ASP.Net controls are server side controls and not client side controls like HTML.
Their actual ID's get generated during the run time not before hand.
So, your syntax should be some thing like:
document.getElementById("<%= rdoOption1.ClientID %>").innerHTML = "sometext";

Check out this post: how-to-change-the-text-of-a-radio-button.
I don't think you can change the text using innerText of a radio button.

How do I add my own attribute to a Telerik RadMaskedTextBox

I need to add my own attribute to a RadMaskedTextBox but can't seem to do it. Any ideas?
Here's the aspx:
<telerik:RadMaskedTextBox
ID="txtSocial_Security_Number" runat="server" SelectionOnFocus="SelectAll" Mask="###-##-####"
requiredrule='<%#required("Social_Security_Number_Or_Federal_Identification_Number")%>'
onkeyup="ValidateTBNew()">
</telerik:RadMaskedTextBox>
The requiredrule pulls a rule from the back end, as you can see. But when Telerik renders the control, the requiredrule is gone! Here's the rendered HTML:
<span id="RadPanelBar1_i2_i0_txtSocial_Security_Number_wrapper"
class="riSingle RadInput RadInput_Default"
style="width:130px;">
<input id="RadPanelBar1_i2_i0_txtSocial_Security_Number"
name="RadPanelBar1$i2$i0$txtSocial_Security_Number"
type="text" size="20"
class="riTextBox riEnabled"
onkeyup="ValidateTBNew()"
value="111-11-1111" />
<input id="RadPanelBar1_i2_i0_txtSocial_Security_Number_ClientState"
name="RadPanelBar1_i2_i0_txtSocial_Security_Number_ClientState"
type="hidden" />
</span>
My onkeyup is there but no sign of the requiredrule. The reason for the requiredrule is so that it can be used to determine one of several states of failure - in the javascript function called in the onkeyup event.

Here's the way I was able to git-er-done...
I was using the RadMaskedTextBox but Telerik says that they are deprecating it. Instead, I used an asp:TextBox and the RadInputManager. Here's the code if you need it.
<asp:TextBox ID="txtSSN" runat="server"
requiredrule='<%#required("Social_Security_Number_Or_Federal_Identification_Number")%>'
onkeyup="ValidateTBNew()"></asp:TextBox>
and
<telerik:RadInputManager ID="RadInputManager1" runat="server">
<telerik:MaskedTextBoxSetting Mask="###-##-####" SelectionOnFocus="SelectAll">
<TargetControls>
<telerik:TargetInput ControlID="txtSSN" />
</TargetControls>
</telerik:MaskedTextBoxSetting>
</telerik:RadInputManager>
This way, the TextBox correctly renders with my extra requiredrule attribute and the formatting of the SSN is done with the RadInputManager.

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

ASP.NET checkbox losing value on postback due to JavaScript/jQuery array?

I have a simple asp:RadioButtonList within a form tag but for some reason it isn't keeping it's value on postback
Here's what I've got
<form runat="server">
<div class="Form">
<span class="FirstField">
<asp:RadioButtonList runat="server" ID="radiolist1" AutoPostBack="true" RepeatDirection="Horizontal">
<asp:ListItem Text="Yes" />
<asp:ListItem Text="No" />
</asp:RadioButtonList>
</span>
</div>
</form>
At the moment all I'm trying to do is get it to keep it's value on postback - it works in Safari but not in Firefox or Internet Explorer.
Any ideas?
Edit:
I've just found out that it is something to do with my javascript in the head of my page
$(document).ready(function() {
var originalValues = new Array();
$("input").focus(function() {
if (!originalValues[this.id]) {
originalValues[this.id] = $(this).val()
}
if ( $(this).val()==originalValues[this.id]) {
$(this).val('').css({'color': "#000", 'font-style': 'normal'});
}
$(this).css({'background-color':'#E8E8E8' });
});
$("input").blur(function() {
if ( $(this).attr("value")=="") {
$(this).val(originalValues[this.id]).css({'color': "#666", 'font-style': 'normal', 'font-weight': 'normal'});
}
$(this).css({'background-color':'#fff' });
});
});

I'm guessing you have some other input elements on your page which use this javascript.
Try specifying the type of input you want the javascript to run on:
$("input:text").focus(function() {
replace :text with the type you're using.

I have pasted your code in a newly created ASP.NET website and was able to retrieve the SelectedValue and SelectedIndex properties.
Are you using a custom adapter for rendering HTML? Please take a look at: ASP.Net RadioButton loses ViewState

Is ViewState enabled for page and control?
EnableViewState property for the page is set to true.
EnableViewState property for the control is set to true.
ViewStateMode property for the control is set to Enabled or inherits the Enabled setting.
http://msdn.microsoft.com/en-us/library/system.web.ui.page.enableviewstate.aspx
EDIT: you don't need to save the old "text" on a RadioButton (html=input type=radio), so you have to apply this function only on textboxes etc. I'm not so
familiar with jQuery, but you should be able to do this with a jQuery selector. Maybe with the :not-selector/function:
[untested]
$("input").not(input[type=radio]).focus(function() {