I have a flask template that loads a form in a modal window for me. The form has 3 drop downs which work well with the required attribute, but it also has two "sets" of checkboxes. Within each set the user must pick one. I am new to javascript and can't seem to get anything to work. The days and actions have to have separate ids in order for the css to work properly with the special checkboxes we have. How can my users be forced to select one action and one day?
<head>
<link rel="stylesheet" type="text/css" href="main.css">
<script src="http://ift.tt/1xDNnh9"></script>
<script type="text/javascript" language="JavaScript">
function checkCheckBoxes(theForm) {
if (
theForm.m.checked == false &&
theForm.t.checked == false &&
theForm.w.checked == false &&
theForm.th.checked == false &&
theForm.f.checked == false &&
theForm.s.checked == false &&
theForm.sn.checked == false &&)
{
alert ('You didn\'t choose a day!');
return false;
} else {
return true;
}
}
</script>
</head>
<body>
<div class="box" title="Schedule">
<div class="wrapper">
<a data-popup="On demand" href="#refresh" value="Refresh Now">Refresh Now</a>
</div>
<a href="#schedule" value="Change Schedule">Change Schedule</a>
</div>
<aside class="modal" id="schedule">
<h2 >Refresh Schedule</h2>
<section >
<div class="onoffswitch">
<form name="onoff" method="post" action="{{ url_for('togglebool') }}">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="onoffswitch" onchange="this.form.submit()" {{ checkval }}>
<label class="onoffswitch-label" for="onoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</form>
</div>
<p id="schedule-mssg"><strong>When should this occur?</strong></p>
<form method='POST' name="schedule_time" action="{{ url_for('info') }}" onsubmit="return checkCheckBoxes(this);">
<select class="custom-dropdown" name="hour" id="hour" required>
<option value="" selected disabled>Hour</option>
{% for i in hours %}
<option value="{{ i }}">{{ i }}</option>
{% endfor %}
</select>
<select class="custom-dropdown" name="minute" id="minute" required>
<option value="" selected disabled>Minute</option>
{% for i in minutes %}
<option value="{{ i }}">{{ i }}</option>
{% endfor %}
</select>
<select class="custom-dropdown" name="period" id="period" required>
<option value="" selected disabled>AM/PM</option>
<option>AM</option>
<option>PM</option>
</select>
<input type="checkbox" name="action" id="code" class="css-checkbox" value="code" checked><label for="code" class="css-label">Code</label>
<input type="checkbox" name="action" id="database" class="css-checkbox" value="database" checked><label for="database" class="css-label">Database</label>
<div id="schedule-form">
<input type="checkbox" name="m" id="m" class="css-checkbox" value="1" checked><label for="m" class="css-label">Mon</label>
<input type="checkbox" name="t" id="t" class="css-checkbox" value="2" checked><label for="t" class="css-label">Tues</label>
<input type="checkbox" name="w" id="w" class="css-checkbox" value="3" checked><label for="w" class="css-label">Wed</label>
<input type="checkbox" name="th" id="th" class="css-checkbox" value="4" checked><label for="th" class="css-label">Thur</label>
<input type="checkbox" name="f" id="f" class="css-checkbox" value="5" checked><label for="f" class="css-label">Fri</label>
<input type="checkbox" name="s" id="s" class="css-checkbox" value="6" checked><label for="s" class="css-label">Sat</label>
<input type="checkbox" name="sn" id="sn" class="css-checkbox" value="7" checked><label for="sn" class="css-label">Sun</label>
</fieldset>
</div>
<input type="submit" name="sched-sub" id="schedule-sub" value="Save Changes"; />
<a href="#" class="btn">Close</a>
</form>
</section>
<footer class="cf">
</footer>
</section>
</aside>
</body>
Aucun commentaire:
Enregistrer un commentaire