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-08T09:02:30.690

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 08 '14 at 09:02

answered Aug 08 '14 at 07:31

Dasarp

194
1
5

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. – Nad Aug 08 '14 at 07:34
you can set its visibility hidden by default, you are using asp.net so ids may differ i think, use appropriate ids – Dasarp Aug 08 '14 at 07:54
1

sorry i missed $ before (''), now i edited, working example.... http://jsfiddle.net/Dasarp/oyLkLwd0/1/ – Dasarp Aug 08 '14 at 09:12
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.? – Nad Aug 08 '14 at 10:01
just use $('#txtOtherBusiness').val(''); after value added to dropdown – Dasarp Aug 08 '14 at 10:04
Did everything, when I submit my form with valid details it gave me this error "Invalid postback or callback argument. Event validation is enabled using in configuration or <%@ Page EnableEventValidation="true" %> in a page. For security purposes, this feature verifies that arguments to postback or callback events originate from the server control that originally rendered them. If the data is valid and expected, use the ClientScriptManager.RegisterForEventValidation method in order to register the postback or callback data for validation." – Nad Aug 08 '14 at 10:18
1

I am not familiar with asp.net, following link will be useful to you... http://stackoverflow.com/questions/228969/invalid-postback-or-callback-argument-event-validation-is-enabled-using-page – Dasarp Aug 08 '14 at 10:23
I think you did your job, will check it out why this is happening. Anyways, Thanks a lot. It helped.! :) Happy weekend – Nad Aug 08 '14 at 10:27

Sudharsan S · Answer 2 · 2014-08-08T07:23:55.927

0

Simply Use .toggle() in jquery

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

edited Aug 08 '14 at 07:23

answered Aug 08 '14 at 07:16

Sudharsan S

15,336
3
31
49

the page is getting refreshed as I click on the button. why ? – Nad Aug 08 '14 at 07:22
Its working, how should I copy the data from that textbox to the mention dropdown ? – Nad Aug 08 '14 at 07:26

Textbox show/hide on button click and dropdown fill

2 Answers2