I am trying to enable my checkboxlist from js? this is my code sofar:
html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script>
function enabledCBL() {
document.getelementbyid('CheckBoxList1').disabled = false;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<button onclick="enabledCBL()">enable</button>
<asp:CheckBoxList ID="CheckBoxList1" runat="server" TextAlign="Right">
<asp:ListItem Text="een">
</asp:ListItem>
<asp:ListItem Text="twee">
</asp:ListItem>
<asp:ListItem Text="drie">
</asp:ListItem>
<asp:ListItem Text="vier">
</asp:ListItem>
</asp:CheckBoxList>
</div>
</form>
</body>
</html>
Please set your CheckBoxList with ClientIDMode="Static" then try again. If not specify ClientIDMode it will generate some id like ct001_CheckBoxList
Read more:
http://msdn.microsoft.com/en-us/library/system.web.ui.control.clientidmode.aspx
JavaScript is case-sensitive. Your statement must be:
document.getElementById('CheckBoxList1').disabled = false;
Try,
function enabledCBL() {
var tab = document.getElementById('CheckBoxList1');
var checkboxes = tab.getElementsByTagName("input");
for (i = 0; i < checkboxes.length; i++)
checkboxes[i].disabled = false;
}
The <button> tag does postback you need to add type attribute to the button.
<button type="button" onclick="enabledCBL()">
enable</button>
Uncheck the items in checkboxlist But i have tired the enable checklist in javascript..But its not working for me..Hope this code will help you . So for I posted here.
function Validate()
{
var tableBody = document.getElementById('CheckBoxList1').childNodes[0];
for (var i=0;i<tableBody.childNodes.length; i++)
{
var currentTd = tableBody.childNodes[i].childNodes[0];
var listControl = currentTd.childNodes[0];
if (listControl.checked==true)
{
listControl.checked = false;
}
}
}
<asp:CheckBoxList ID="CheckBoxList1" runat="server" TextAlign="Right">
<asp:ListItem Text="aa">
</asp:ListItem>
<asp:ListItem Text="twee">
</asp:ListItem>
<asp:ListItem Text="drie">
</asp:ListItem>
<asp:ListItem Text="vier">
</asp:ListItem>
</asp:CheckBoxList>
I have seen an Example based on your needs in Jquery Refer this link Jquery
Related
I'm using 'label1' like a global variable to pass info from 1 script (type="text/javascript") to another script (runat="server"), however the setAttribute("src",...) with a variable doesn't seem to work. Note that it does work if hardcoded. Here is a portion of my ASP.Net code:
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<script type="text/javascript" >
var soundObject = null;
function PlaySound() {
if (soundObject != null) {
document.body.removeChild(soundObject);
soundObject.removed = true;
soundObject = null;
}
soundObject = document.createElement("embed");
soundObject.setAttribute("src", label1.Text);
soundObject.setAttribute("hidden", true);
soundObject.setAttribute("autostart", true);
document.body.appendChild(soundObject);
}
window.onload = PlaySound;
</script>
<script runat="server" >
void Selection_Change(Object sender, EventArgs e)
{
label1.Text = SongList.SelectedItem.Value.ToString();
Response.Write(SongList.SelectedItem.Value);
}
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<asp:DropDownList id="SongList" AutoPostBack="True" OnSelectedIndexChanged="Selection_Change"
runat="server">
<asp:ListItem Selected="True" Value="Love Is All Around.mp3">
Love Is All Around.mp3</asp:ListItem>
<asp:ListItem Value="Om.mp3">Om.mp3</asp:ListItem>
<asp:ListItem Value="Nights In White Satin.mp3">
Nights In White Satin.mp3</asp:ListItem>
</asp:DropDownList>
<asp:Label ID="label1" Text="Om.mp3" runat="server" />
<input type="button" onclick="PlaySound()" value="Play Sound" />
Your issue is, that your javascript does not find the label1 variable.
You can not just reference asp.net server controls in javascript - javascript doesn't know about them.
Find your label1 via javascript with getElementById and then read the content of the element (in javascript this will be a span). The ID you use in getElementById has to be the ClientID of your label, so if you want to use label1 for an id, you need to set the ClientIDMode property to static.
So far this is what i have tried and cant get it to work. I had formatted slightly different earlier and the code worked but would only hide/show the the dropdownlist I wanted when i made another selection on my form. I am looking for a way to write this code so that dropdownlist is made visible or non visible as soon as the checkbox changes from false to true and vice versa
<asp:DropDownList ID="ddlcars" runat="server" AutoPostBack="True" Visible="False">
<asp:ListItem>Please select a model</asp:ListItem>
<asp:ListItem Value="18295">Impreza</asp:ListItem>
<asp:ListItem Value="26595">WRX</asp:ListItem>
<asp:ListItem Value="21595">Crosstrek</asp:ListItem>
</asp:DropDownList>
<asp:DropDownList ID="ddlpromocars" runat="server" AutoPostBack="True" Visible="False">
<asp:ListItem>Please select a model</asp:ListItem>
<asp:ListItem Value="25395">BRZ</asp:ListItem>
<asp:ListItem Value="24995">Outback</asp:ListItem>
Spring Promotion
Protected Sub chkpromo_CheckedChanged(sender As Object, e As EventArgs) Handles chkpromo.CheckedChanged
If chkpromo.Checked = True Then
ddlcars.Visible = False & ddlpromocars.Visible = True
Exit Sub
End If
If chkpromo.Checked = False Then
ddlcars.Visible = True & ddlpromocars.Visible False
Exit Sub
End If
End Sub
Remove Autopostback="True" for chkpromo, ddlcars and ddlpromocars to avoid postbacks
Remove Visible="False" for ddlcars and ddlpromocars to write html but hide it with css class.
Remove OnCheckedChanged="chkpromo_CheckedChanged" for chkpromo to avoid postbacks
And try
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>YOUR TITLE</title>
<script type="text/javascript">
function SetDdls(isChecked) {
if (isChecked) {
document.getElementsByName('ddlcars')[0].style.display = 'none';
document.getElementsByName('ddlpromocars')[0].style.display = 'block';
} else {
document.getElementsByName('ddlcars')[0].style.display = 'block';
document.getElementsByName('ddlpromocars')[0].style.display = 'none';
}
}
</script>
<style>
/*only for hide some element */
.hide {
display: none;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:CheckBox runat="server" ID="chkpromo" OnClick="SetDdls(this.checked);" Text="Click Me" /> <%--OnClick fires javascript function "SetDdls"--%>
<hr />
<asp:DropDownList ID="ddlcars" runat="server" >
<asp:ListItem>Please select a model</asp:ListItem>
<asp:ListItem Value="18295">Impreza</asp:ListItem>
<asp:ListItem Value="26595">WRX</asp:ListItem>
<asp:ListItem Value="21595">Crosstrek</asp:ListItem>
</asp:DropDownList>
<asp:DropDownList ID="ddlpromocars" runat="server" CssClass="hide"> <%--Hide by default unchecked--%>
<asp:ListItem>Please select a model</asp:ListItem>
<asp:ListItem Value="25395">BRZ</asp:ListItem>
<asp:ListItem Value="24995">Outback</asp:ListItem>
</asp:DropDownList>
</div>
</form>
</body>
</html>
And finally delete from code behind Sub "chkpromo_CheckedChanged".
So i changed my code to this and it works but the dropdownlist wont update until i change another control on my web form. Is there a way that I can make the ddl change upon me clicking on the checkbox
Protected Sub chkPromo_CheckedChanged(sender As Object, e As EventArgs) Handles chkPromo.CheckedChanged
If chkPromo.Checked = True Then
ddlpromocars.visible = True
ddlcars.Visible = False
End If
If chkPromo.Checked = False Then
ddlpromocars.Visible = False
ddlcars.Visible = True
End If
End Sub
<td>Type:
</td>
<td>
<asp:DropDownList ID="ddltype" runat="server">
<asp:ListItem>---select---</asp:ListItem>
<asp:ListItem Text="Setter" Value="1">
</asp:ListItem>
<asp:ListItem Text="Getter" Value="2"></asp:ListItem>
</asp:DropDownList>
</td>
For this dropdownlist, I put validation like this
var ddltype = document.getElementById('<%=ddltype.ClientID%>');
var type = ddltype.options[ddltype.selectedValue].value;
if (type == 0) {
alert("Please Select setter/getter type.");
return false;
}
but it is not firing. How can I write this?
You should really get familiar with ASP.NET validators. Javascript can be disabled.
<asp:DropDownList ID="ddltype" runat="server" AutoPostBack="true">
<asp:ListItem>---select---</asp:ListItem>
<asp:ListItem Text="Setter" Value="1"></asp:ListItem>
<asp:ListItem Text="Getter" Value="2"></asp:ListItem>
</asp:DropDownList><br />
<asp:RequiredFieldValidator ID="reqType" runat="server"
InitialValue="---select---"
ControlToValidate="ddltype"
ErrorMessage="Required: Please select a Type"
Display="Dynamic"
CssClass="blah">
</asp:RequiredFieldValidator>
The InitialValue is important. Otherwise ---select--- would be a valid selection.
Note that i've also added AutoPostBack="true" to the DropDownList, maybe you want to postback immediately as soon as the user has selected an item.
Side-note: use a ValidationSummary with ShowMessageBox="true" and EnableClientScript="true" if you want to show the messages in a javascript alert.
Try this
var ddltype = document.getElementById('<%=ddltype.ClientID%>').text;
if (type == "---select---") {
alert("Please Select setter/getter type.");
return false;
}
Try this way ! but you can use asp.net validation control .
Any way ,my solution will validate two type ,for the dropdown selected vale or dropdown selected item
function Validate()
{
var e = document.getElementById('<%=ddltype.ClientID%>');
//if you need value to be compared then use
var strUser = e.options[e.selectedIndex].value;
//if you need text to be compared then use
var strUser1 = e.options[e.selectedIndex].text;
if(strUser==0) **//for text use if(strUser1=="---Select---")**
{
alert("Please Select setter/getter type.");
return false;
}
}
The below code has change your some code and working good for me
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Home.aspx.cs" Inherits="Home" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
function validation() {
debugger;
var e = document.getElementById('<%=ddltype.ClientID%>');
var strUser1 = e.options[e.selectedIndex].value;
if (strUser1 == 0) {
alert("Please Select setter/getter type.");
return false;
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<table>
<tr>
<td>
<asp:Button ID="btnSave" runat="server" Text="Save" OnClientClick="validation();" OnClick="btnSave_Click" />
<asp:DropDownList ID="ddltype" runat="server">
<asp:ListItem Text="--Select--" Value="0"></asp:ListItem>
<asp:ListItem Text="Setter" Value="1">
</asp:ListItem>
<asp:ListItem Text="Getter" Value="2"></asp:ListItem>
</asp:DropDownList>
</td>
</tr>
</table>
<div>
</div>
</form>
</body>
</html>
and see this line
<asp:ListItem Text="--Select--" Value="0"></asp:ListItem>
But you missed set value in that item , So it's get error, Now set value 0 in that line , and now your code working (See my sample code), Or you need to use .text and check the condition for
if(strUser1=="---Select---")
{
//alert
}
<asp:RadioButtonList ID="RdoBtnHasNotified" runat="server" RepeatDirection="Horizontal" AutoPostBack="True" OnSelectedIndexChanged="RdoBtnHasNotified_SelectedIndexChanged">
<asp:ListItem Value="1">Yes</asp:ListItem>
<asp:ListItem Value="0" Selected="True">No</asp:ListItem>
</asp:RadioButtonList>
<asp:TextBox ID="TxtHowNotified" runat="server" TextMode="MultiLine" MaxLength="100"></asp:TextBox>
I want to enable the TextBox by clicking on the RadioButtonList, without using autopostback=true. How can I do this with JavaScript?
You can use jQuery to manipulate input's enabled state (HTML translation for TextBox) or you can use ASP.NET Ajax so you can set both controls inside of update panel in this case you won't see page being reloaded on postback which must happen in order for you to change status of TextBox on some other event.
Tbh i would go with ASP.NET Ajax because my experience shows that jQuery does not work that well with ASP.NET controls when it comes to complex stuff ie. ASP.NET uses javascript for event activation which can cause either jQuery or ASP.NET not to work as you may expected.
Good luck with update panels...
Using jQuery, you can have a fairly custom result by hooking in to the changes on the radio buttons...
$("#<%= RdoBtnHasNotified.ClientID %> > input[type=radio]").change(function(){
// this function is called whenever one of the radio button list's control's change
// the $(this) variable refers to the input control that triggered the event
var txt = $("#<%= TxtHowNotified.ClientID %>");
if($(this).val()=="1") {
txt.removeAttr("disabled");
} else {
txt.attr("disabled", true);
}
});
Each ListItem renders a radio button with the same name parameter; I would suggest running the app and looking at the generated source to get an idea of what you need to do to listen for the radio button events. Essentially the ID of the radio button list is the name parameter, so you can get the group of radio buttons as (using JQuery):
$("input[name='<%= rbl.ClientID%>']").click(function() {
var tb = $("#textboxid");
//do something here; this points to the radio button
});
HTH.
Here you go:
<%# Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void RdoBtnHasNotified_PreRender(object sender, EventArgs e)
{
foreach (ListItem item in RdoBtnHasNotified.Items)
item.Attributes.Add("onclick", string.Format("toggleTextBox(this,'{0}');", TxtHowNotified.ClientID));
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
function toggleTextBox(radioButton, textBoxId) {
document.getElementById(textBoxId).disabled = radioButton.value != "1";
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:RadioButtonList ID="RdoBtnHasNotified" OnPreRender="RdoBtnHasNotified_PreRender"
runat="server" RepeatDirection="Horizontal">
<asp:ListItem Value="1">Yes</asp:ListItem>
<asp:ListItem Value="0" Selected="True">No</asp:ListItem>
</asp:RadioButtonList>
<asp:TextBox ID="TxtHowNotified" runat="server" TextMode="MultiLine" MaxLength="100" Enabled="false"></asp:TextBox>
</div>
</form>
</body>
</html>
Write the code in the following way
<script type="text/javascript">
$(document).ready(function() {
$("input[name='RdoBtnHasNotified']").change(function() {
$("input[name='RdoBtnHasNotified']:checked").val() == '1' ? $('#TxtHowNotified').removeAttr("disabled") : $('#TxtHowNotified').attr('disabled', 'true');
});
});
</script>
and also disable the textbox (Enabled="false") since initialy the value of the "RdoBtnHasNotified" is "No".
$('#<%= RdoBtnHasNotified.ClientID %> > input[type=radio]').click(function()
{
var txtbox = $('#<%= TxtHowNotified.ClientID %>');
if($(this).val() == '1')
{
document.getElementById('#<%= TxtHowNotified.ClientID %>').disabled = false;
}
else
{
document.getElementById('#<%= TxtHowNotified.ClientID %>').disabled = true;
}
});
I think using change event will not fire in IE.
<asp:DropDownList ID="ddloption" runat="server" Visible="false">
<asp:ListItem Text="Active" Value="Active"></asp:ListItem>
<asp:ListItem Text="D-Active" Value="D-Active"></asp:ListItem>
</asp:DropDownList>
function boxchange(dd)
{
document.getElementById("<%= ddloption.ClientID%>").visibility = "visible";
}
ddloption is null, what i m getting...can you tell me how to work with this.
When you have a runat="server" visible="false" asp control, it is not rendered in the html. Try something like this:
<div id="wrapper" style="display: none;">
<asp:DropDownList ID="ddloption" runat="server">
<asp:ListItem Text="Active" Value="Active"></asp:ListItem>
<asp:ListItem Text="D-Active" Value="D-Active"></asp:ListItem>
</asp:DropDownList>
</div>
function boxchange(dd)
{
document.getElementById("wrapper").style.display = "block";
}
To hide the dropdown
document.getElementById("<%= ddloption.ClientID%>").Style.display='none';
To Show it again:
document.getElementById("<%= ddloption.ClientID%>").Style.display='';
Cheers
try
function boxchange(dd)
{
var control = document.getElementById("<%= ddloption.ClientID %>");
if (control != null)
control.style.visibility = "visible";
}
Nick is right, didn't even notice.