Although it seems like a simple task, I'm struggling to make it work.
I created a form where the user can select a month from a list using the tags:
<select> <option>
When the selection is changed, the class .gone from the day SELECT is removed, displaying the list. Similarly, when the year is changed, the class .gone from the year INPUT is removed and the year is displayed.
To set the default value for the year, I used PHP. My goal is to take the selected value for the month and addClass .gone to the OPTION tag for the 31st day (29th and 30th for February), ensuring those dates are not selectable. Additionally, I plan to check for leap years by dividing the year value by 4 and excluding the 29th of February if necessary. Essentially, this is just a basic date selection form.
The issue I'm encountering is that even though I add the class .gone to the OPTION, it still appears visible. I suspect this may be due to overlooking some fundamental HTML principle, but I haven't been able to identify the problem.
CSS:
.gone {display:none;}
I also considered using:
.hidden {visibility:hidden;}
However, this method would still display an empty space, so I opted against it.
In my HTML code, I have included scripts:
<html>
<head>
<link to css styles>
<script language="JavaScript" type="text/javascript">
function showDay() {
$("#day").removeClass("gone")
}
function showYear() {
$("#year").removeClass("gone")
}
</script>
</head>
<body>
<table>
<tr>
<td>
<select id="month" onchange="showDay();">
<option>January</option>
<option>more months...yada...yada</option>
<option>December</option>
</select>
</td>
<td>
<select class="gone" id="day" onchange="showYear();">
<option></option>
<option>1</option>
<option>2</option>
<option>more days</option>
<option class="gone">31</option>
</select>
</td>
<td>
<input class="gone" type="text" size="5" name="year" id="year"
value="<?php echo date("Y"); ?>"/>
</td>
</tr>
</table>
</body>
</html>
The PHP and Javascript functions are working as intended, but I haven't yet implemented the logic to show or hide the days dynamically based on the month and year. Once I resolve the issue with the .gone class not functioning as expected, I will proceed with that step.
Thank you in advance for any assistance!
UPDATE!!!
After receiving feedback, I have decided to disable the unwanted dates using JavaScript. I found a sample script on w3schools.com, modified it slightly, and linked it to the onchange event of the month SELECT.
function disableElement()
{
var sel=document.getElementById("day")
sel.options[30].disabled=true;
sel.options[31].disabled=true;
}
This modification worked perfectly, preventing the selection of the 30th and 31st days!