remi
/
calendar-booking
1
0
Fork 1
Code Issues 1 Pull Requests Projects Releases Wiki Activity

WIP book

This commit is contained in:
Remi Rampin 2022-05-12 23:31:41 -04:00
parent 26006c698f
commit 3faeabb299
1 changed files with 236 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

237
form.html
View File

@ -7,7 +7,7 @@
<body> <body>
<div class="container px-5 my-5"> <div class="container px-5 my-5">
<form id="contactForm"> <form id="contactForm" action="https://contact.vicky.rampin.org/book" method="POST">
<div class="mb-3"> <div class="mb-3">
<label class="form-label" for="name">Full name</label> <label class="form-label" for="name">Full name</label>
<input class="form-control" id="name" name="name" type="text" placeholder="Full name" /> <input class="form-control" id="name" name="name" type="text" placeholder="Full name" />
@ -22,18 +22,197 @@
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label class="form-label d-block">Which day and time works best for us to meet on Zoom?</label> <label class="form-label d-block">Which day and time works best for us to meet on Zoom?</label>
<table class="table">
<thead>
<tr>
<th scope="col">Thursday 5/12</th>
<th scope="col">Friday 5/13</th>
<th scope="col">Monday 5/16</th>
<th scope="col">Tuesday 5/17</th>
<th scope="col">Wednesday 5/18</th>
<th scope="col">Thursday 5/19</th>
<th scope="col">Friday 5/20</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="form-check form-check-inline"> <div class="form-check form-check-inline">
<input class="form-check-input" id="optionA" type="radio" name="date" /> <input class="form-check-input" id="2022-05-12T09:00:00" value="2022-05-12T09:00:00" type="radio" name="date" />
<label class="form-check-label" for="optionA">option A</label> <label class="form-check-label" for="2022-05-12T09:00:00">9:00</label>
</div> </div>
</td>
<td>
<div class="form-check form-check-inline"> <div class="form-check form-check-inline">
<input class="form-check-input" id="optionB" type="radio" name="date" /> <input class="form-check-input" id="2022-05-13T09:00:00" value="2022-05-13T09:00:00" type="radio" name="date" />
<label class="form-check-label" for="optionB">option B</label> <label class="form-check-label" for="2022-05-13T09:00:00">9:00</label>
</div> </div>
</td>
<td>
<div class="form-check form-check-inline"> <div class="form-check form-check-inline">
<input class="form-check-input" id="optionC" type="radio" name="date" /> <input class="form-check-input" id="2022-05-16T09:00:00" value="2022-05-16T09:00:00" type="radio" name="date" />
<label class="form-check-label" for="optionC">option C</label> <label class="form-check-label" for="2022-05-16T09:00:00">9:00</label>
</div> </div>
</td>
<td>
<div class="form-check form-check-inline">
<input class="form-check-input" id="2022-05-17T09:00:00" value="2022-05-17T09:00:00" type="radio" name="date" />
<label class="form-check-label" for="2022-05-17T09:00:00">9:00</label>
</div>
</td>
<td>
<div class="form-check form-check-inline">
<input class="form-check-input" id="2022-05-18T09:00:00" value="2022-05-18T09:00:00" type="radio" name="date" />
<label class="form-check-label" for="2022-05-18T09:00:00">9:00</label>
</div>
</td>
<td>
<div class="form-check form-check-inline">
<input class="form-check-input" id="2022-05-19T09:00:00" value="2022-05-19T09:00:00" type="radio" name="date" />
<label class="form-check-label" for="2022-05-19T09:00:00">9:00</label>
</div>
</td>
<td>
<div class="form-check form-check-inline">
<input class="form-check-input" id="2022-05-20T09:00:00" value="2022-05-20T09:00:00" type="radio" name="date" />
<label class="form-check-label" for="2022-05-20T09:00:00">9:00</label>
</div>
</td>
</tr>
<tr>
<td>
<div class="form-check form-check-inline">
<input class="form-check-input" id="2022-05-12T09:30:00" value="2022-05-12T09:30:00" type="radio" name="date" />
<label class="form-check-label" for="2022-05-12T09:30:00">9:30</label>
</div>
</td>
<td>
<div class="form-check form-check-inline">
<input class="form-check-input" id="2022-05-13T09:30:00" value="2022-05-13T09:30:00" type="radio" name="date" />
<label class="form-check-label" for="2022-05-13T09:30:00">9:30</label>
</div>
</td>
<td>
<div class="form-check form-check-inline">
<input class="form-check-input" id="2022-05-16T09:30:00" value="2022-05-16T09:30:00" type="radio" name="date" />
<label class="form-check-label" for="2022-05-16T09:30:00">9:30</label>
</div>
</td>
<td>
<div class="form-check form-check-inline">
<input class="form-check-input" id="2022-05-17T09:30:00" value="2022-05-17T09:30:00" type="radio" name="date" />
<label class="form-check-label" for="2022-05-17T09:30:00">9:30</label>
</div>
</td>
<td>
<div class="form-check form-check-inline">
<input class="form-check-input" id="2022-05-18T09:30:00" value="2022-05-18T09:30:00" type="radio" name="date" />
<label class="form-check-label" for="2022-05-18T09:30:00">9:30</label>
</div>
</td>
<td>
<div class="form-check form-check-inline">
<input class="form-check-input" id="2022-05-19T09:30:00" value="2022-05-19T09:30:00" type="radio" name="date" />
<label class="form-check-label" for="2022-05-19T09:30:00">9:30</label>
</div>
</td>
<td>
<div class="form-check form-check-inline">
<input class="form-check-input" id="2022-05-20T09:30:00" value="2022-05-20T09:30:00" type="radio" name="date" />
<label class="form-check-label" for="2022-05-20T09:30:00">9:30</label>
</div>
</td>
</tr>
<tr>
<td>
<div class="form-check form-check-inline">
<input class="form-check-input" id="2022-05-12T10:00:00" value="2022-05-12T10:00:00" type="radio" name="date" />
<label class="form-check-label" for="2022-05-12T10:00:00">10:00</label>
</div>
</td>
<td>
<div class="form-check form-check-inline">
<input class="form-check-input" id="2022-05-13T10:00:00" value="2022-05-13T10:00:00" type="radio" name="date" />
<label class="form-check-label" for="2022-05-13T10:00:00">10:00</label>
</div>
</td>
<td>
<div class="form-check form-check-inline">
<input class="form-check-input" id="2022-05-16T10:00:00" value="2022-05-16T10:00:00" type="radio" name="date" />
<label class="form-check-label" for="2022-05-16T10:00:00">10:00</label>
</div>
</td>
<td>
<div class="form-check form-check-inline">
<input class="form-check-input" id="2022-05-17T10:00:00" value="2022-05-17T10:00:00" type="radio" name="date" />
<label class="form-check-label" for="2022-05-17T10:00:00">10:00</label>
</div>
</td>
<td>
<div class="form-check form-check-inline">
<input class="form-check-input" id="2022-05-18T10:00:00" value="2022-05-18T10:00:00" type="radio" name="date" />
<label class="form-check-label" for="2022-05-18T10:00:00">10:00</label>
</div>
</td>
<td>
<div class="form-check form-check-inline">
<input class="form-check-input" id="2022-05-19T10:00:00" value="2022-05-19T10:00:00" type="radio" name="date" />
<label class="form-check-label" for="2022-05-19T10:00:00">10:00</label>
</div>
</td>
<td>
<div class="form-check form-check-inline">
<input class="form-check-input" id="2022-05-20T10:00:00" value="2022-05-20T10:00:00" type="radio" name="date" />
<label class="form-check-label" for="2022-05-20T10:00:00">10:00</label>
</div>
</td>
</tr>
<tr>
<td>
<div class="form-check form-check-inline">
<input class="form-check-input" id="2022-05-12T10:30:00" value="2022-05-12T10:30:00" type="radio" name="date" />
<label class="form-check-label" for="2022-05-12T10:30:00">10:30</label>
</div>
</td>
<td>
<div class="form-check form-check-inline">
<input class="form-check-input" id="2022-05-13T10:30:00" value="2022-05-13T10:30:00" type="radio" name="date" />
<label class="form-check-label" for="2022-05-13T10:30:00">10:30</label>
</div>
</td>
<td>
<div class="form-check form-check-inline">
<input class="form-check-input" id="2022-05-16T10:30:00" value="2022-05-16T10:30:00" type="radio" name="date" />
<label class="form-check-label" for="2022-05-16T10:30:00">10:30</label>
</div>
</td>
<td>
<div class="form-check form-check-inline">
<input class="form-check-input" id="2022-05-17T10:30:00" value="2022-05-17T10:30:00" type="radio" name="date" />
<label class="form-check-label" for="2022-05-17T10:30:00">10:30</label>
</div>
</td>
<td>
<div class="form-check form-check-inline">
<input class="form-check-input" id="2022-05-18T10:30:00" value="2022-05-18T10:30:00" type="radio" name="date" />
<label class="form-check-label" for="2022-05-18T10:30:00">10:30</label>
</div>
</td>
<td>
<div class="form-check form-check-inline">
<input class="form-check-input" id="2022-05-19T10:30:00" value="2022-05-19T10:30:00" type="radio" name="date" />
<label class="form-check-label" for="2022-05-19T10:30:00">10:30</label>
</div>
</td>
<td>
<div class="form-check form-check-inline">
<input class="form-check-input" id="2022-05-20T10:30:00" value="2022-05-20T10:30:00" type="radio" name="date" />
<label class="form-check-label" for="2022-05-20T10:30:00">10:30</label>
</div>
</td>
</tr>
</tbody>
</table>
</div> </div>
<div class="d-grid"> <div class="d-grid">
<button class="btn btn-primary btn-lg disabled" id="submitButton" type="submit">Submit</button> <button class="btn btn-primary btn-lg disabled" id="submitButton" type="submit">Submit</button>
@ -42,5 +221,49 @@
</div> </div>
<script src=".bootstrap/bootstrap.bundle.min.js"></script> <script src=".bootstrap/bootstrap.bundle.min.js"></script>
<script>
let contactForm = document.getElementById("contactForm");
function formValid() {
console.log("name: ", contactForm.name.value);
if(!contactForm.name.value) {
console.log("wrong name ", contactForm.name.value);
return false;
}
console.log("email: ", contactForm.email.value);
if(!contactForm.email.value) {
console.log("wrong email ", contactForm.email.value);
return false;
}
console.log("topic: ", contactForm.topic.value);
if(!contactForm.topic.value) {
console.log("wrong topic ", contactForm.topic.value);
return false;
}
console.log("date: ", contactForm.date.value);
if(!contactForm.date.value) {
console.log("wrong date ", contactForm.date.value);
return false;
}
return true;
}
contactForm.addEventListener("submit", function submitEventHandler(e) {
if(!formValid()) {
e.preventDefault();
}
});
contactForm.addEventListener("change", function changeEventHandler(e) {
if(formValid()) {
console.log("change, valid=true");
document.getElementById("submitButton").classList.remove("disabled");
} else {
console.log("change, valid=false");
document.getElementById("submitButton").classList.add("disabled");
}
});
</script>
</body> </body>
</html> </html>