JSFiddle - React, Tailwind, and code Playground
by kodesh
HTML
<form name="f1" action="" method="post" onSubmit="return check()">
<table cellpadding="2" cellspacing="2">
<tr>
<td><p style="color:#999; font-size:14px; text-align:right;">What times are you generally available to take classes?</p></td>
<td style="color:#999; font-size:14px;">
<input type="checkbox" name="day[]" class="day" value="monday" />Monday <span class="times-monday hidden" id="day">
Timing
<select name="mondayfromtime" id="mfrom">
<option value="">----Start Time-----</option>
<option value="Monday 6:00 am">6:00 am</option>
<option value="Monday 7:00 am">7:00 am</option>
</select>
<select name="mondaytotime" id="mto" >
<option value="">----End Time-----</option>
<option value="TO 6:00 am">6:00 am</option>
<option value="TO 7:00 am">7:00 am</option>
</select>
</span><br/>
<input type="checkbox" name="day[]" class="day" value="tuesday" />Tuesday <span class="times-tuesday hidden" id="day1">Timing<select name="tuesdayfromtime" id="tfrom" >
<option value="">----Start Time-----</option>
<option value="Tuesday 6:00 am">6:00 am</option>
<option value="Tuesday 7:00 am">7:00 am</option>
</select>
<select name="tuesdaytotime" id="tto" >
<option value="">----End Time-----</option>
<option value="TO 6:00 am">6:00 am</option>
<option value="TO 7:00 am">7:00 am</option>
</select></span><br/>
<input type="checkbox" name="day[]" class="day" value="wednesday" />wednesday<span class="times-wednesday hidden" id="day2"> Timing<select name="wednesdayfromtime" id="wfrom" >
<option value="">----Start Time-----</option>
<option value="Wednesday 6:00 am">6:00 am</option>
<option value="Wednesday 7:00 am">7:00 am</option>
</select>
<select name="wednesdaytotime" id="wto" >
<option value="">----End Time-----</option>
<option value="TO 6:00 am">6:00 am</option>
<option value="TO 7:00 am">7:00 am</option>
</select></span><br/>
<input type="checkbox" name="day[]" class="day" value="thursday" />thursday<span class="times-thursday hidden" id="day3"> Timing <select...JavaScript
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(document).on('click', '.day', function() {
$('.times-' + this.value).toggle();
});
$('#day').hide();
$('#day1').hide();
$('#day2').hide();
$('#day3').hide();
$('#day4').hide();
$('#day5').hide();
$('#day6').hide();
});
</script>
<script type="text/javascript">
window.onload=function() {
document.getElementsByName("f1")[0].onsubmit=function() {
var day= document.getElementsByName('day[]'),dayOk=false;
for (var i = 0, n=day.length; i < n; i++) {
if (day[i].checked) {
dayOk = true;
break;
}
}
if (!dayOk) {
alert('please select the Day');
day[0].focus(); // focus the first
return false;
}
mform=document.getElementById('mfrom');
mto=document.getElementById('mto');
if(mform.value=='')
{
alert('enter the monday Form Timing');
mform.focus();
return false;
}
if(mto.value=='')
{
alert('enter the monday To Timing');
mto.focus();
return false;
}
tform=document.getElementById('tfrom');
tto=document.getElementById('tto');
if(tform.value=='')
{
alert('enter the Tuesday Form Timing');
tform.focus();
return false;
}
if(tto.value=='')
{
alert('enter the Tuesday To Timing');
tto.focus();
return false;
}
wform=document.getElementById('wfrom');
wto=document.getElementById('wto');
if(wform.value=='')
{
alert('enter the Wednesday Form Timing');
wform.focus();
return false;
}
if(wto.value=='')
{
alert('enter the Wednesday To Timing');
wto.focus();
return false;
}
thform=document.getElementById('thfrom');
thto=document.getElementById('thto');
if(thform.value=='')
{
alert('enter the Thursday Form Timing');
thform.focus();
return false;
}
if(thto.value=='')
{
alert('enter the Thursday To Timing');
thto.focus();
return false;
}
fform=document.getElementById('ffrom');
fto=document.getElementById('fto');
if(fform.value=='')
{
alert('enter the Friday Form Timing');
fform.focus();
return false;
}
if(fto.value=='')
{
alert('enter the Friday To ...