Textbox show/hide on button click and dropdown fill

Question

I am making an functionality where on click of button a textbox should appear, and whatever the user fills the value , it should automatically gets updated in that dropdown. I tried with the below mentioned code, where I am hiding/showing the textbox but unable to fill the dropdown:

<script type="text/javascript">
    $(document).ready(function () {
        $('#ctl00_ContentPlaceHolder1_txtOtherBusiness').hide();
        $("#ctl00_ContentPlaceHolder1_btnbusinessAdd").click(function () {
            $('#ctl00_ContentPlaceHolder1_txtOtherBusiness').show();
        });
        $("#ctl00_ContentPlaceHolder1_btnbusinessAdd").click(function () {
            $('#ctl00_ContentPlaceHolder1_txtOtherBusiness').hide();
        });
    })
</script>

Also see the html for dropdown, textbox and button :-

 <td>
     <asp:DropDownList CssClass="txtfld-popup" ID="ddlBusinessUnit" runat="server"></asp:DropDownList>
     <asp:Button ID="btnbusinessAdd" runat="server" Width="63" Text="Add" CausesValidation="false"/>
     <asp:TextBox ID="txtOtherBusiness" runat="server" Visible="true" CssClass="txtfld-popup" CausesValidation="false"></asp:TextBox>
     <asp:RequiredFieldValidator CssClass="error_msg" ID="reqBusinessUnit" ControlToValidate="ddlBusinessUnit" runat="server" ErrorMessage="Please enter business unit" InitialValue="--Select--" SetFocusOnError="true"></asp:RequiredFieldValidator>
 </td>

Dasarp · Accepted Answer · 2014-08-08 09:02:30Z

1

for adding value and text to drop down

EDIT: edited the visibility condition

$(document).ready(function () {
        $('#txtOtherBusiness').hide();
        $('#btnbusinessAdd').click(function () {
            if ($('#txtOtherBusiness').is(':visible')) {
                var text = $('#txtOtherBusiness').val();
                var dropDown = $('#ddlBusinessUnit');
                var text = $('#txtOtherBusiness').val();
                var itemVal = 1; // some value for option
                var newItem = $('<option/>').val(itemVal).text(text).appendTo(dropDown);
                $('#txtOtherBusiness').hide();
            }
            else {
                $('#txtOtherBusiness').show();
            }
        });
    });

edited Aug 8, 2014 at 9:02

answered Aug 8, 2014 at 7:31

Dasarp

1941 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

HEEN Over a year ago

Its not working, I want whenever a user click on add button a textbox should be visible and whatever value he puts it should gets copied in the dropdown list.

Dasarp Over a year ago

you can set its visibility hidden by default, you are using asp.net so ids may differ i think, use appropriate ids

Dasarp Over a year ago

sorry i missed $ before ('<option/>'), now i edited, working example.... jsfiddle.net/Dasarp/oyLkLwd0/1

HEEN Over a year ago

One more thing, the textbox is not getting clear after adding. It still shows me the last value added in the textbox. How should I clear it.?

Dasarp Over a year ago

I am not familiar with asp.net, following link will be useful to you... stackoverflow.com/questions/228969/…

|

Sudharsan S · Accepted Answer · 2014-08-08 07:23:55Z

0

Simply Use .toggle() in jquery

$("#ctl00_ContentPlaceHolder1_btnbusinessAdd").click(function (event) {
            event.preventDefault();
            $('#ctl00_ContentPlaceHolder1_txtOtherBusiness').toggle();
 });

edited Aug 8, 2014 at 7:23

answered Aug 8, 2014 at 7:16

Sudharsan S

15.4k4 gold badges34 silver badges51 bronze badges

2 Comments

HEEN Over a year ago

the page is getting refreshed as I click on the button. why ?

HEEN Over a year ago

Its working, how should I copy the data from that textbox to the mention dropdown ?

Collectives™ on Stack Overflow

Textbox show/hide on button click and dropdown fill

2 Answers 2

8 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related