I have an ‘Availability Form’ on my site which allows users to select a date/time they desire to schedule an appointment.
I want to differentiate which dates/times are available (or not) within the Availability form, by using either of two separate CSS ‘class’ variables… ‘available’ or ‘unavailable’.
I’d like to be able to dynamically manage the Availability Form on the ‘Visitor’s Page’ using a mirrored structure on a ‘Manager’s Page’, by toggling the CSS class of a particular selection in the form between ‘avaiable’ or ‘unavailable’and saving the changes.
I am thinking a possible way to achieve this may be an ‘onclick’ javascript function?
But honestly, I am a bit out of my depth on this particular type of coding.
Any advice or help would be greatly appreciated.
I have included a simplified structure below (without any script).
CSS:
.pageContainer {
width: 100%;
max-width: 280px;
margin: auto;
align-items: center;
}
.dayContainer {
float: left;
padding: 10px;
width: 120px;
text-align: center;
margin-bottom: 40px;
}
h1 {
font-family: arial;
text-align: center;
}
.dayHeader {
color: #ffffff;
font-family: arial;
font-weight: bold;
cursor: pointer;
height: 40px;
line-height: 40px;
background-color: black;
}
.available {
width: 100%;
color: #ffffff;
font-family: arial;
cursor: pointer;
height: 40px;
line-height: 40px;
background-color: green;
}
.available:hover {font-weight: bold;}
.unavailable {
width: 100%;
color: #333333;
font-family: arial;
cursor: pointer;
height: 40px;
line-height: 40px;
background-color: grey;
}
.unavailable:hover {font-weight: bold;}
.buttonWrapper {
width:100%;
text-align: center;
}
VISITOR’S PAGE (Availability Form):
<div class="pageContainer">
<h1>Visitor's Page</h1>
<form action="" method="post" name="availabilityForm">
<div class="dayContainer">
<div class="dayHeader">MONDAY</div>
<button id="VR1-C1" class="available">1:00 PM</button>
<button id="VR2-C1" class="unavailable">2:00 PM</button>
<button id="VR3-C1" class="available">3:00 PM</button>
</div>
<div class="dayContainer">
<div class="dayHeader">TUESDAY</div>
<button id="VR1-C2" class="unavailable">1:00 PM</button>
<button id="VR2-C2" class="available">2:00 PM</button>
<button id="VR3-C2" class="available">3:00 PM</button>
</div>
</form>
</div>
MANAGER’S PAGE
<div class="pageContainer">
<h1>Manager's Page</h1>
<div class="dayContainer">
<div class="dayHeader">MONDAY</div>
<div id="MR1-C1" class="available" onclick="updateClass">1:00 PM</div>
<div id="MR2-C1" class="unavailable" onclick="updateClass">2:00 PM</div>
<div id="MR3-C1" class="available" onclick="updateClass">3:00 PM</div>
</div>
<div class="dayContainer">
<div class="dayHeader">TUESDAY</div>
<div id="MR1-C2" class="unavailable" onclick="updateClass">1:00 PM</div>
<div id="MR2-C2" class="available" onclick="updateClass">2:00 PM</div>
<div id="MR3-C2" class="available" onclick="updateClass">3:00 PM</div>
</div>
<br><br>
<div class="buttonWrapper"><button>Save Changes</button></div>
</div>