[RESOLVED]How to display different input type depending on selected option from a drop down list using javascript in asp.net web application

I am developing an web application with vb.net and asp.net.

In this web application one of the web form there is a drop down list which code is like below

 <div class="form-element">
                <label>New status (required)</label>
                <select id="comNewStatus" runat="server" datavaluefield="id" datatextfield="name" class="nFee"></select>
            </div>

the options/data shown in the above drop-down list is coming from data base  and they are conditional as well. these options are not fixed all the time. they are visible depending on a previous selection by the user. 

Among those data there are 3 data for which I want to display 3 different input types. the id of these 3 option/data are 10, 11 and 12 respectively.

I want to display different input type below this drop-down list depending on the selected data in the drop-down list.

the data shown in the above drop-down list is coming from data base. Among those data there are 3 data whose id are 10, 11 and 12 respectively.

Example

If in the drop down list the selected data id is 10 I want to display a text box below the dropdown list

<div class="form-element">
               <label>Offered salary (numeric only!!)</label>
                <input type="text" id="txtOfferedSalary" class="txtOfferedSalary" runat="server" data-bind="value:offeredSalary, valueUpdate: 'afterkeydown'" />
            </div>

If in the drop down list the selected data id is 11 I want to display two other text boxes below the dropdown list

               <div class="form-element">
                <label>Final salary (numeric only!!)</label>
                <input type="text" id="txtFinalSalary" class="txtFinalSalary" runat="server" data-bind="value:finalSalary, valueUpdate: 'afterkeydown'" />
            </div>


                <div class="form-element">
                <label>Paid introduction fee (numeric only!!)</label>
                <input type="text" id="txtFinalIntroductionFee" class="txtFinalIntroductionFee" runat="server" data-bind="value: introductionFee, valueUpdate: 'afterkeydown'" />
            </div>

If in the drop down list the selected data id is 12 I want to display a calender below the dropdown list

               <div class="form-element">
                <label>
                    Start date (required if job offered, format: DD-MMM-YYYY)
                </label>
                <div class="input-append">
                    <span class="add-on "><span class="icon-calendar"></span></span>
                    <input class="dp" size="16" type="text" value="" runat="server" id="txtStartDate" />
                </div>
            </div>

For the rest of the data I  want to do nothing.

How can I do it with javascript? Please help me with code.

Thank you

Hi,

I guess something like this is what you need to do

http://stackoverflow.com/questions/15229980/show-a-textbox-on-drop-down-select

All the best

Thanks for your reply.But the particular blocks are not displaying when choosing the specific option. In my web application the option values are coming from database. so I have written the select code according to my question.

(i.e I have only written the <select></select> block and I have not written the code for <option></option> block inside the <select></select> block). Is it because of that the code is not working?

I have debugged the code. the data value in the select field is correct. fyi. The id are integer value. I appreciate your help

Hi bashabi,

For your issue, below are my suggestion:

Step1 : You need to set your three div as invisible .

Step2 : you should add change event for your select like below:

$(function(){

$("#selectId").change(function(){
   if($(this).val=="10")
{
  //add css for your div,set it as visual
}
})
})

Best Regards,

Kevin Shen.

Hi Kevin

Please see my edited code below.

 <asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="Server">


               <div class="form-element">
                    <label>New status (required)</label>
                    <select id="comNewStatus" runat="server" datavaluefield="id" datatextfield="name" class="nFee" onchange="displayDiv()"></select>
                </div>

                <div id="cal" class="form-element">
                    <label>
                        Start date (required if job offered, format: DD-MMM-YYYY)
                    </label>
                    <div class="input-append">
                        <span class="add-on "><span class="icon-calendar"></span></span>
                        <input class="dp" size="16" type="text" value="" runat="server" id="txtStartDate" />
                    </div>
                </div>

            <div class="btn-wrapper">

                <button runat="server" id="btnUpdate" class="btn" >Update</button>

                <a class="btn" href="javascript:window.close();">Close</a>
            </div>


</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ScriptContent" runat="Server">

      <script type="text/javascript">

          function displayDiv() {
              if ($("#comNewStatus").val() == "1") {
                  $("#cal").show();
              }
              else {
                  $("#cal").hide();
              }
          }

        function RefreshParent() {
             if (window.opener != null && !window.opener.closed) {
                 window.opener.location.reload();
                  }
             }

       window.onbeforeunload = RefreshParent;

    </script>
</asp:Content>

It does not work. With the current code the specific block is visible when the form is first open.but when change the option in drop down box it become invisible. and it does not appear even choosing the correct option. 

All the references of jquery have been made in the master file.

Please suggest me where I am wrong or advice alternative code.

Hi 

I have found one solution. As I am using master/detail page so the control names get special ID’s, and  comNewStatus becomes ctl01_contentplaceholder_comNewStatus etc.

so I have changed my script as below.

   <script type="text/javascript">

          function displayDiv() {
              if ($("#<%= comNewStatus.ClientID %>").val() == "12") {
                  $("#cal").show();
              }
              else if ($("#<%= comNewStatus.ClientID %>").val() == "10") {
                  $("#os").show();
              }
              else if ($("#<%= comNewStatus.ClientID %>").val() == "11") {
                  $("#fs").show();
              }
              else {
                  $("#cal").hide();
                  $("#os").hide();
                  $("#fs").hide();

              }
          }



        function RefreshParent() {
             if (window.opener != null && !window.opener.closed) {
                 window.opener.location.reload();
                  }
             }
       window.onbeforeunload = RefreshParent;
    

    </script>

and made the display as none of the specific div.

e.g;

               <div id="cal" class="form-element" style="display:none;">
                    <label>
                        Start date (required if job offered, format: DD-MMM-YYYY)
                    </label>
                    <div class="input-append">
                        <span class="add-on "><span class="icon-calendar"></span></span>
                        <input class="dp" size="16" type="text" value="" runat="server" id="txtStartDate" />
                    </div>
                </div>
                

 And the code for drop down box is 

               <div class="form-element">
                    <label>New status (required)</label>
                    <select id="comNewStatus" runat="server" datavaluefield="id" datatextfield="name" class="nFee" onchange="displayDiv()"></select>
                </div>

 

It is working now.

Thank you very much who replied my questions

Leave a Reply