CODEWITHSUNDEEP
javascriptjqueryhtml
Jeet Patel
Jeet Patel

Reputation: 1241

want to display and hide content based on selection of drop down list

I know its to simple but I am new to this.

I am trying to display a input type date field on selection of "sold" from drop down list.

I have tried few thing but still its not working. So here is my code.

$('#dbType').change(function() {
  selection = $(this).val();
  switch (selection) {
    case 'Sold':
      $('#otherType').show();
      break;
    default:
      $('#otherType').hide();
      break;
  }
});
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>


<form action="intra_day_trade_insert.php" method="POST">
  Share Puchased Of Company <input type="text" name="Share_Puchased_Of_Company">
  <br><br><br> Price For One Share <input type="number" name="Price_For_One_Share">
  <br><br><br> Quantity <input type="number" name="Quantity">
  <br><br><br> Date Of Purchase <input type="date" name="Date_Of_Purchase">
  <br><br><br>
  <label for="db">Status</label>
  <select name="dbType" id="dbType">
    			   <option>Choose Status</option>
    			   <option value="oracle">Owned</option>
    			   <option value="mssql">Sold</option>
    			</select>
  <div id="otherType" style="display:none;">
    Sold on date <input type="date" name="Sold_on_date">
  </div>
  <br><br><br>
  <input type="submit" name="Add_To_Balance_Sheet" value="Add To Balance Sheet">
</form>

Upvotes: 1

Views: 107

Answers (3)

Md.Jewel Mia
Md.Jewel Mia

Reputation: 3451

Please try it it's work fine. 

    <head>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>‌​

    <script>    
$('document').ready(function(){
    $('#dbType').change(function(){
   var selection = $(this).val(); 

   switch(selection)
   { 
       case 'mssql':
           $('#otherType').show();
           break;
       default:
           $('#otherType').hide();
           break;
   }
});
});
    </script>

    </head>

        <body>

            <form action = "intra_day_trade_insert.php" method = "POST">

            Share Puchased Of Company <input type="text" name = "Share_Puchased_Of_Company">
            <br><br><br>

            Price For One Share <input type = "number" name = "Price_For_One_Share">
            <br><br><br>

            Quantity <input type = "number" name = "Quantity">
            <br><br><br>

            Date Of Purchase <input type = "date" name = "Date_Of_Purchase">
            <br><br><br>

            <label for="db">Status</label>

            <select name="dbType" id="dbType">
               <option>Choose Status</option>
               <option value="oracle">Owned</option>
               <option value="mssql">Sold</option>
            </select>

            <div id="otherType" style="display:none;">

            Sold on date <input type = "date" name = "Sold_on_date">

            </div>
            <br><br><br>


            <input type = "submit" name = "Add_To_Balance_Sheet" value = "Add To Balance Sheet">

            </form>



        </body>

</html>

Upvotes: 1

Super User
Super User

Reputation: 9642

You have passed wrong value in sold option, check updated snippet below:

$('#dbType').change(function(){
   selection = $(this).val();  
   switch(selection)
   { 
       case 'Sold':
           $('#otherType').show();
           break;
       default:
           $('#otherType').hide();
           break;
   }
});
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
     <form action = "intra_day_trade_insert.php" method = "POST">

            Share Puchased Of Company <input type="text" name = "Share_Puchased_Of_Company">
            <br><br><br>

            Price For One Share <input type = "number" name = "Price_For_One_Share">
            <br><br><br>

            Quantity <input type = "number" name = "Quantity">
            <br><br><br>

            Date Of Purchase <input type = "date" name = "Date_Of_Purchase">
            <br><br><br>

            <label for="db">Status</label>

            <select name="dbType" id="dbType">
               <option>Choose Status</option>
               <option value="Owned">Owned</option>
               <option value="Sold">Sold</option>
            </select>

            <div id="otherType" style="display:none;">

            Sold on date <input type = "date" name = "Sold_on_date">

            </div>
            <br><br><br>


            <input type = "submit" name = "Add_To_Balance_Sheet" value = "Add To Balance Sheet">

            </form>

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337714

The issue is because the value of the option in the select is mssql, not Sold - that's the text of the option.

Also, make sure that you execute the jQuery logic in a document.ready handler when including it in the <head> of the document, and you can simplify the logic by using toggle() instead. Try this:

$(function() {
  $('#dbType').change(function() {
    $('#otherType').toggle($(this).val() == 'mssql');
  });
});
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>


<form action="intra_day_trade_insert.php" method="POST">
  Share Puchased Of Company 
  <input type="text" name="Share_Puchased_Of_Company"><br><br><br> 
  Price For One Share <input type="number" name="Price_For_One_Share"><br><br><br> 
  Quantity <input type="number" name="Quantity"><br><br><br> 
  Date Of Purchase <input type="date" name="Date_Of_Purchase"><br><br><br>

  <label for="db">Status</label>
  <select name="dbType" id="dbType">
    <option>Choose Status</option>
    <option value="oracle">Owned</option>
    <option value="mssql">Sold</option>
  </select>

  <div id="otherType" style="display:none;">
    Sold on date <input type="date" name="Sold_on_date">
  </div><br><br><br>

  <input type="submit" name="Add_To_Balance_Sheet" value="Add To Balance Sheet">
</form>

Upvotes: 1

Related Questions