want to display and hide content based on selection of drop down list
Question
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>
3 answers
solution1
1 2017-05-03 09:05:08
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>
solution2
1 ACCPTED 2017-05-03 09:11:07
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>
solution3
0 2017-05-03 09:05:17
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
display/hide textbox based on drop down list
How to hide and show content based on drop down selection
Display or hide drop down box based on user checkbox selection
Hide and show panel based on selection from drop down list
Show/hide drop down list based on selection of another drop down list
Display a value from database based on Drop down list selection
show and hide based on drop-down selection
Hide input boxes based on drop down selection
Want display and hide drop down using javascript
Hide field based on drop down selection in sharepoint new item
Related Tags