Visible the Textbox when User Select Others on the Dropdownlist using Javascript
Hi i have came across one task, ie: I have dropdownlist that has some items along with 'Others' So if the user Choose the value Others - i have to visible the Textbox and Validator so user should enter somthing on the textbox else it show Validation error if the user choose any other item , i have to disable the Textbox and the Validator.
Using Javascript its easy to do this , i am not good in Javascript i got a help from the Expert to make it work.
ASPX
<asp:DropDownList ID="EducationLevel_DropDownList" runat="server" Width="202px" Font-Names="Verdana" Font-Size="10pt" AppendDataBoundItems="True"> <asp:ListItem Value="-1">Select</asp:ListItem> <asp:ListItem Value="1">PhD</asp:ListItem> <asp:ListItem Value="2">PhD Student</asp:ListItem> <asp:ListItem Value="3">Master Degree</asp:ListItem> <asp:ListItem Value="4">Bachelor Degree</asp:ListItem> <asp:ListItem Value="5">Under Graduate Student</asp:ListItem> <asp:ListItem Value="6">Others</asp:ListItem> </asp:DropDownList> <asp:RequiredFieldValidator ID="RequiredFieldValidator5" runat="server" ControlToValidate="EducationLevel_DropDownList" Display="Dynamic" ErrorMessage="Education Leve required !" InitialValue="-1" SetFocusOnError="True" ValidationGroup="Profile" Font-Size="8pt">*</asp:RequiredFieldValidator><asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="TextBox1" Display="Dynamic" ErrorMessage="Education Leve required !" SetFocusOnError="True" ValidationGroup="Profile" Font-Size="8pt">*</asp:RequiredFieldValidator>
And the Javascript is given below so here i am pass the Valuefield of Other ie: 6 , when a textbox has validators, they are stored in the Validators collection , so no need to pass the ValidatorID.
JAVASCRIPT
<script type="text/javascript" language ="javascript" >
function getSelectValue(sel) {
var val;
// only if there is a selected item
if (sel.selectedIndex>-1) {
// get the value from the select element
val=sel.options[sel.selectedIndex].value;
// alert(val);
}
return val;
}
function ddlChange(DropDownID,TextBoxID)
{
var c=document.getElementById(DropDownID);
var div=document.getElementById(TextBoxID);
if(getSelectValue(c)=='6')
{
div.value='';
div.style.visibility="visible";
if (div.Validators&&div.Validators.length) {
for (var i=0; i<div.Validators.length; i++)
ValidatorEnable(div.Validators[i], true)
}
}
else
{
div.value='6';
div.style.visibility="hidden";
if (div.Validators&&div.Validators.length) {
for (var i=0; i<div.Validators.length; i++)
ValidatorEnable(div.Validators[i], false)
}
}
}
</script>
Then On_PageLoad you have to pass the TextboxID and DropdownlistID to the Javascript Function.
EducationLevel_DropDownList.Attributes.Add("onchange", "ddlChange('" + EducationLevel_DropDownList.ClientID + "','" + TextBox1.ClientID + "');");
TextBox1.Style.Add("visibility", "hidden");
Then On_PageLoad you have to pass the TextboxID and DropdownlistID to the Javascript Function.
EducationLevel_DropDownList.Attributes.Add("onchange", "ddlChange('" + EducationLevel_DropDownList.ClientID + "','" + TextBox1.ClientID + "');");
TextBox1.Style.Add("visibility", "hidden");
Read more »
Posts
