Visible the Textbox when User Select Others on the Dropdownlist using Javascript

Posted by Venkat | Labels: ,

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

PayOffers.in