0

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

In this web application one of the web form is like below New status (required)

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.

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

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 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 dont want to do anything. How can I do it with javascript? Please help me with code.

Thank you

Edited code

<%@ Page Title="" Language="VB" MasterPageFile="~/_resx/E4_Popup.master" AutoEventWireup="false" CodeFile="update-status_popup.aspx.vb" Inherits="E4_Jobs_Details_Application_update_status" %>


<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>

</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>

all the references of jquery and ko-js have been made in the master file.

Bashabi
  • 696
  • 1
  • 12
  • 40
  • Take a look [here](http://stackoverflow.com/questions/12080098/dropdown-using-javascript-onchange) – ahb Oct 24 '14 at 11:37
  • I have seen the link you mentioned. But I am still struggling to display the input types. cause my option values are coming from database 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.can you help me with code – Bashabi Oct 24 '14 at 11:42
  • In that case you should pull in all the different select options from the database, hide them using css and using js display the correct one based on the users selection – ahb Oct 24 '14 at 15:57

1 Answers1

1

Add jquery and add Id's to your divs, hide them by default (display:none) and then display them on the onchange event of the select control.

Edit: added proper control id resolving in case of master/detail pages.

<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        function displayDiv() {
            if ($("#<%= comNewStatus.ClientID %>").val() == "2") {
                $("#divFirst").show();
            }
            else {
                $("#divFirst").hide();
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div class="form-element">
            <label>
                New status (required)</label>
            <select id="comNewStatus" runat="server" datavaluefield="id" datatextfield="name"
                class="nFee" onchange="displayDiv()">
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
                <option value="3">Opotion 3</option>
            </select>
        </div>
    </div>
    <div id="divFirst" class="form-element" style="display:none;">
        <label>
            Offered salary (numeric only!!)</label>
        <input type="text" id="txtOfferedSalary" class="txtOfferedSalary" runat="server"
            data-bind="value:offeredSalary, valueUpdate: 'afterkeydown'" />
    </div>
    <div id="divSecond" class="form-element" style="display:none;">
        <label>
            Final salary (numeric only!!)</label>
        <input type="text" id="txtFinalSalary" class="txtFinalSalary" runat="server" data-bind="value:finalSalary, valueUpdate: 'afterkeydown'" />
    </div>
    </form>
</body>
Iztoksson
  • 980
  • 16
  • 32
  • 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 block and I have not written the code for block inside the 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. – Bashabi Oct 24 '14 at 15:54
  • It doesn't matter if the values are coming from a database, you need to include onchange – Iztoksson Oct 24 '14 at 18:52
  • Hi sorry for late reply. Please see my edited code in the question. I have edited the code according to your answer. The calender doesnot display when choosing the correct option. I have debugged the code to see the value in the select box. it seems correct. The KO JS was in this file all the time. I have disabled the KO-JS codes. I have disabled the code to see if KO-JS is blocking it. But the result is same. Can you suggest where I am wrong? – Bashabi Oct 27 '14 at 10:06
  • with the edited code the calender is visible when the form is open . but when change the option in drop down box it become invisible. and it does not appear even choosing the correct option. – Bashabi Oct 27 '14 at 10:11
  • Hi, because you're using master/detail page your control names get special ID's, your comNewStatus becomes ctl01_contentplaceholder_comNewStatus etc. You need to change the script to use the new control id like this: if ($('#<%= comNewStatus.ClientID %>').val() == "1"). – Iztoksson Oct 27 '14 at 12:06