regarding drpo down list

[kodingkarthik]

Hi all,

I am trying to select a value from drop down list and if the value is NewDepartment then a text box should be visible for adding a new value and that value must be populated in the drop down list also if the user selects the new value then that value should also be stored into the database.

How can we do that?
I did write few lines of code but i am getting errors.My code goes here

Dim k As String
        If ddldept.SelectedItem = NewDepartment Then
            txtdept.Text = Visible
            k = txtdept.Text.ToString()
            ddldept.SelectedItem.Equals(k)
        End If

I am getting an error at NewDepartment saying that NewDepartment is not declared.

Any help is greatly appreciated.
Thanks in advance,
Karthik.

[Aneesh_Argent]

Try this:

If (ddldept.SelectedItem.ToString() = "NewDepartment" ) Then
txtdept.Text = Visible
k = txtdept.Text.ToString()
ddldept.SelectedItem.Equals(k)
End If

[kodingkarthik]

I think ther is a problem in the code i am not able to get the required o/p
like if i select the value the textbox should be visible but iti is not happenning

[Aneesh_Argent]

Are you sure about the spelling of the selected item. Is it "NewDepartment" with no spaces in between words?

[kodingkarthik]

But i am not able to get the required o/p like i have to display a text box on selecting a specific value in the drop down list

[Aneesh_Argent]

Can you post your source code for the Dropdownlist

[kodingkarthik]

Here is my code

Dim k As String
        If (ddldept.SelectedItem.ToString() = "NewDepartment") Then
            txtdept.Visible = True
            k = txtdept.Text.ToString()
            ddldept.SelectedItem.Equals(k)
        End If

Source Code:

<asp:DropDownList ID="ddldept" runat="server" Style="z-index: 131; left: 242px; position: absolute;
            top: 153px">
            <asp:ListItem>Solutions</asp:ListItem>
            <asp:ListItem>SA</asp:ListItem>
            <asp:ListItem>Training</asp:ListItem>
            <asp:ListItem>HR</asp:ListItem>
            <asp:ListItem>Finance</asp:ListItem>
            <asp:ListItem>Documentation</asp:ListItem>
            <asp:ListItem>Quality</asp:ListItem>
            <asp:ListItem>NewDepartment</asp:ListItem>
        </asp:DropDownList>

Thank u

[Aneesh_Argent]

This code is working fine for me:

If I select the item 'NewDepartment' and click the button the textbox is becoming visible. As you can see i have written the code in the button click event. Is this you are looking for?

.aspx

<asp:DropDownList ID="ddldept" runat="server" Style="z-index: 131; left: 242px; position: absolute;
            top: 153px">
            <asp:ListItem>Solutions</asp:ListItem>
            <asp:ListItem>SA</asp:ListItem>
            <asp:ListItem>Training</asp:ListItem>
            <asp:ListItem>HR</asp:ListItem>
            <asp:ListItem>Finance</asp:ListItem>
            <asp:ListItem>Documentation</asp:ListItem>
            <asp:ListItem>Quality</asp:ListItem>
            <asp:ListItem>NewDepartment</asp:ListItem>
        </asp:DropDownList>
        
        <asp:Button ID="Button2" runat="server" Text="Button" /></div>
        
        
        <asp:TextBox ID="TextBox1" Visible="false" Text=""  runat="server"></asp:TextBox>

.aspx.vb

Protected Sub Button2_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button2.Click
        If (ddldept.SelectedItem.ToString() = "NewDepartment") Then
            TextBox1.Visible = True
        End If
    End Sub

[kodingkarthik]

ya thts fine but u are using a button click event but i want dropdown list onselectionchanged event. i am not able to do that.

[Aneesh_Argent]

Try this:

.aspx

<asp: DropDownList OnSelectedIndexChanged="ddldept_SelectedIndexChanged" AutoPostBack="true" ID="ddldept" runat="server" Style="z-index: 131; left: 242px; position: absolute;
top: 153px">
<asp:ListItem>Solutions</asp:ListItem>
<asp:ListItem>SA</asp:ListItem>
<asp:ListItem>Training</asp:ListItem>
<asp:ListItem>HR</asp:ListItem>
<asp:ListItem>Finance</asp:ListItem>
<asp:ListItem>Documentation</asp:ListItem>
<asp:ListItem>Quality</asp:ListItem>
<asp:ListItem>NewDepartment</asp:ListItem>
</asp: DropDownList>

.aspx.vb

Protected Sub ddldept_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles ddldept.SelectedIndexChanged
If (ddldept.SelectedItem.ToString() = "NewDepartment") Then
TextBox1.Visible = True
End If
End Sub

[SheSaidImaPregy]

Try this without a postback. This works with javascript to do it on the client, not on the server:

<asp:DropDownList ID="ddldept" onchange="chkChange(this);" runat="server" Style="z-index: 131; left: 242px; position: absolute; top: 153px">
    <asp:ListItem>Solutions</asp:ListItem>
    <asp:ListItem>SA</asp:ListItem>
    <asp:ListItem>Training</asp:ListItem>
    <asp:ListItem>HR</asp:ListItem>
    <asp:ListItem>Finance</asp:ListItem>
    <asp:ListItem>Documentation</asp:ListItem>
    <asp:ListItem>Quality</asp:ListItem>
    <asp:ListItem>NewDepartment</asp:ListItem>
</asp:DropDownList>
<asp:TextBox ID="TextBox1" runat="server" style="display: none;" />
<script type="text/javascript">
    function chkChange(ddl)
    {
        var textbox = document.getElementById("<%= TextBox1.ClientID %>");

        if (ddl.options[ddl.selectedIndex].value == "NewDepartment")
        {
            textbox.style.display = "block";
        }
        else
        {
            textbox.style.display = "none";
        }
    }
</script>

By changing the options, it will do a check to see if the value selected is "NewDepartment". If it is, the textbox will be shown. if not, it will be hidden.

[kodingkarthik]

Happy New Year 2009!!!!!!!!!!!!!!!
Thanks for your reply to my query but if i am using this code it is giving me an error at onchange=chkChange(this) saying that it(onchange()) is not a valid attribute can you suggest me any changes?

Thanks in advance,
Karthik.

[Aneesh_Argent]

Happy New Year 2009

"onchange() is not a valid attribute" is just a warning message. That's because you're using a webcontrol, which doesn't have an onchange
method. Visual Studio is letting you know that OnChange isn't a valid event for the DropDownList control. However, it is a valid event for an HTML input element and will be passed through to the rendered HTML and should work as expected. But if the warning bothers you, you can use ddldept.Attributes.Add("onchange", "chkChange(this);") in your code behind page load event , to set the client side attribute (and delete the onchange attrbute from your source).

In short the above code (of SheSaidImaPregy) will work despite the warnings that you metioned.

[kodingkarthik]

Thanks for your help but i am getting an IE Script error window saying tht would you like to continue with Yes/no Buttons

[Aneesh_Argent]

Can u post ur complete code(.aspx). Or is it exactly the same as above(I suppose not coz its working fine for me in IE and FF)

[kodingkarthik]

Here is my code:

<asp:DropDownList ID="ddldept" OnChange="chkChange(this);" runat="server" Style="z-index: 118; left: 242px; position: absolute;
            top: 153px">
            <asp:ListItem>Solutions</asp:ListItem>
            <asp:ListItem>SA</asp:ListItem>
            <asp:ListItem>Training</asp:ListItem>
            <asp:ListItem>HR</asp:ListItem>
            <asp:ListItem>Finance</asp:ListItem>
            <asp:ListItem>Documentation</asp:ListItem>
            <asp:ListItem>Quality</asp:ListItem>
            <asp:ListItem>NewDepartment</asp:ListItem>
                    </asp:DropDownList>
           <asp:TextBox ID="txtdept" runat="server" Style="z-index: 127; left: 361px; position: absolute;
            top: 153px" Width="113px" Visible="False"></asp:TextBox>
                    <script type="text/javascript">
                function chkChange(ddl)
                {
                    var textbox = document.getElementById("<%= txtdept.ClientID %>");
                    if (ddl.options[ddl.selectedIndex].value == "NewDepartment")
                {
                    textbox.style.display = "block";
                }
                    else
                {
                    textbox.style.display = "none";
                }
                }
                </script>
        <asp:TextBox ID="txtdesig" runat="server" Style="z-index: 119; left: 590px; position: absolute;
            top: 149px"></asp:TextBox>

[Aneesh_Argent]

Ok just replace your textbox with this

<asp:TextBox ID="txtdept" runat="server" Style="z-index: 127; left: 361px; position: absolute;
top: 153px; display:none" Width="113px"></asp:TextBox>

[SheSaidImaPregy]

Aneesh_Argent is right, you need to replace the Textbox, or remove the "Visible='False'" property. The one thing you will need to learn about the visibility property of these web controls is that if it is "False", it will not be rendered on the page. You were receiving an error because your textbox didn't exist on the client's computer (browser), since it was never rendered from the server. By removing the Visible="False", and adding in your Style attribute the "display: none;", you will have the desired output, and would not require a postback to the server which will save time for a simple task.

Also, by coding this way, you will be seeing a lot of "warning" messages. If you wish to avoid the warning messages, use Aneesh's suggestion and manually attach the event from the code-behind, or inline if that is what you are using. (Code-behind has the code file associtated with it: default.aspx --> default.aspx.cs || Inline coding has the code on your same page: default.aspx). Attach the event just how he suggested. You will avoid these warnings, but it's a lot of extra code and can be more difficult to change in the future as it brings the design and business layers together.

[kodingkarthik]

Thanks to both of you but if i do like that i am not getting my desired o/p
My requirement is
If the user selects NewDepartment in the combobox then only the text box should be visible until then it is should be hidden and later when the textbox is displayed then the cursor should be in the textbox. if the user enters a value into the textbox it must be captured and populated into the combo box dynamically and also for that particular employee the value for the newdepartment must be saved into the database.

thanks for u all,
Karthik.

[SheSaidImaPregy]

In javascript (the script tags below your dropdownlist), you can set focus to an element by first grabbing the element (document.getElementById("id")) and applying ".focus()". Becareful of this, it will throw an error if your element trying to be focused doesn't exist or is hidden. To add an option to the dropdownlist, you first grab it like above, then add the attributes ".options" and then ".add". An example is below:

document.getElementById("<%= ddldept.ClientID %>").options.add(new Option(index, "value", "text"));

[kodingkarthik]

Hi SheSaidImaPregy,

Thanks for your reply but i am not able to understand the logic behind the code for "focus()" method. What u said is correct i am getting an error with the following code

<script type="text/javascript">
                function chkChange(ddl)
                {
                    var textbox = document.getElementById("<%= txtdept.ClientID %>");
                    
                    if (ddl.options[ddl.selectedIndex].value == "New Department")
                {
                    textbox.style.display = "block";
                }
                    else
                {
                    textbox.style.display = "none";
                }
document.getElementById("<%= ddldept.ClientID %>").options.add(new Option(index, "value", "text"));
                }
                </script>

Help please
Thank u.

[SheSaidImaPregy]

I'm sorry, didn't realize that was a function I built to add an option. Here is the way to add an option:

<script type="text/javascript">
    function chkChange(ddl)
    {
        var textbox = document.getElementById("<%= txtdept.ClientID %>");
                    
        if (ddl.options[ddl.selectedIndex].value == "New Department")
        {
            elm.onblur = function() { addOptionOnBlur(this); };
            textbox.style.display = "block";
            textbox.focus();
        }
        else
        {
            textbox.style.display = "none";
        }
    }

    function addOptionOnBlur(elm)
    {
        if (elm.value.length > 0 && elm.value.replace(/ /g, "").length > 0)
        {
            document.getElementById("<%= ddldept.ClientID %>").options.add(newOption(elm.value, elm.value));
        }
    }

    function newOption(val, txt)
    {
        var option = document.createElement("OPTION");
        option.text = txt;
        option.value = val;

        return option;
    }
</script>

This will add an option to the dropdownlist everytime the textbox loses focus, as long as the value is empty and isn't only spaces.