Show/Hide fields with Javascript / jQuery
September 17, 2017
See a live demo here.
<html>
<head>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
</head>
<body>
<form action="" method="post">
<table>
<tr>
<td>Range Type</td>
<td class="date_range">Start Date</td>
<td class="date_range"> </td>
<td class="date_range">End Date</td>
<td class="month_range">Start Month</td>
<td class="month_range">Start Year</td>
<td class="month_range"> </td>
<td class="month_range">End Month</td>
<td class="month_range">End Year</td>
<td></td>
</tr>
<tr>
<td>
<select name="select" id="range_type">
<option value="date_range">By Date Range</option>
<option value="month_range">By Month</option>
</select>
</td>
<td class="date_range">
<input type="text" name="start_date" value="" />
</td>
<td class="date_range">-</td>
<td class="date_range">
<input type="text" name="end_date" value="" />
</td>
<td class="month_range">
<select name="select" name="start_month">
<option value=""></option>
<option value="01">January</option>
<option value="02">February</option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
</td>
<td class="month_range">
<input type="text" name="start_year" value="" />
</td>
<td class="month_range">-</td>
<td class="month_range">
<select name="select" name="end_month">
<option value=""></option>
<option value="01">January</option>
<option value="02">February</option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
</td>
<td class="month_range">
<input type="text" name="end_year" value="" />
</td>
<td>
<input type="button" value="Submit" />
</td>
</tr>
</table>
</form>
<script>
$(function() {
$("#range_type").change(function() {
$(".date_range").css("display", "none");
$(".month_range").css("display", "none");
if ($(this).val() == "date_range") {
$(".date_range").css("display", "table-cell");
} else if ($(this).val() == "month_range") {
$(".month_range").css("display", "table-cell");
}
}).trigger("change");
});
</script>
</body>
</html>