pingu_98/cara
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Added click of radio buttons on change of input

Browse source
This commit is contained in:
gaazzopa 2020-11-18 20:53:27 +01:00
parent 445f927db0
commit 8eff591ba3
2 changed files with 57 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

61
cara/apps/calculator/static/js/form.js
View file

@ -38,6 +38,18 @@ function require_fields(obj) {
require_air_changes(false);
require_air_supply(true);
break;
case "hepa_yes":
require_hepa(true);
break;
case "hepa_no":
require_hepa(false);
break;
case "mask_on":
require_mask(true);
break;
case "mask_off":
require_mask(false);
break;
case "event_type_single":
require_single_event(true);
require_recurrent_event(false);
@ -52,18 +64,6 @@ function require_fields(obj) {
case "lunch_option_yes":
require_lunch(true);
break;
case "mask_on":
require_mask(true);
break;
case "mask_off":
require_mask(false);
break;
case "hepa_yes":
require_hepa(true);
break;
case "hepa_no":
require_hepa(false);
break;
default:
break;
}
@ -218,8 +218,41 @@ function show_disclaimer() {
}
}
function check_radio(id) {
$(id).click();
$(".has_radio").on('click', function(event){
click_radio(this.id);
});
$(".has_radio").on('change', function(event){
click_radio(this.id);
});
function click_radio(id) {
switch (id) {
case "room_volume":
$("#room_type_volume").click();
break;
case "floor_area":
case "ceiling_height":
$("#room_type_dimensions").click();
break;
case "air_supply":
$("#air_type_supply").click();
break;
case "air_changes":
$("#air_type_changes").click();
break;
case "hepa_amount":
$("#hepa_yes").click();
break;
case "single_event_date":
$("#event_type_single").click();
break;
case "recurrent_event_month":
$("#event_type_recurrent").click();
break;
default:
break;
}
}
/* -------Form validation------- */

20
cara/apps/calculator/templates/calculator.form.html.j2
View file

@ -43,12 +43,12 @@
</div><br>
<input type="radio" id="room_type_volume" name="volume_type" value="room_volume" onclick="require_fields(this)" required>
<label for="room_type_volume">Room volume:</label> &nbsp;&nbsp;
<input type="number" step="any" id="room_volume" class="non_zero" name="room_volume" placeholder="Room volume (m³)" min="0" onclick="check_radio('#room_type_volume')" ><br>
<input type="number" step="any" id="room_volume" class="non_zero has_radio" name="room_volume" placeholder="Room volume (m³)" min="0"><br>
<input type="radio" id="room_type_dimensions" name="volume_type" value="room_dimensions" onclick="require_fields(this)" required>
<label for="room_type_dimensions">Floor area:</label> &nbsp;&nbsp;
<input type="number" step="any" id="floor_area" class="non_zero" name="floor_area" placeholder="Room floor area (m²)" min="0" onclick="check_radio('#room_type_dimensions')"><br>
<input type="number" step="any" id="floor_area" class="non_zero has_radio" name="floor_area" placeholder="Room floor area (m²)" min="0"><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <label for="room_type_dimensions">Ceiling height:</label> &nbsp;&nbsp;
<input type="number" step="any" id="ceiling_height" class="non_zero" name="ceiling_height" placeholder="Room ceiling height (m²)" min="0" onclick="check_radio('#room_type_dimensions')"><br>
<input type="number" step="any" id="ceiling_height" class="non_zero has_radio" name="ceiling_height" placeholder="Room ceiling height (m²)" min="0"><br>
<hr width="80%">
<!-- Ventilation Options -->
@ -66,10 +66,10 @@
<div id="DIVmechanical_ventilation" style="display:none">
<input type="radio" id="air_type_supply" name="mechanical_ventilation_type" value="air_supply" onclick="require_fields(this)">
<label for="air_type_supply">Air supply flow rate</label> &nbsp;&nbsp;
<input type="number" step="any" id="air_supply" class="non_zero" name="air_supply" min="0" placeholder="(m³ / hour)" onclick="check_radio('#air_type_supply')"><br>
<input type="number" step="any" id="air_supply" class="non_zero has_radio" name="air_supply" min="0" placeholder="(m³ / hour)"><br>
<input type="radio" id="air_type_changes" name="mechanical_ventilation_type" value="air_changes" onclick="require_fields(this)">
<label for="air_type_changes">Air changes per hour</label> &nbsp;&nbsp;
<input type="number" step="any" id="air_changes" class="non_zero" name="air_changes" min="0" placeholder="(h⁻¹) only fresh air" onclick="check_radio('#air_type_changes')"><br>
<input type="number" step="any" id="air_changes" class="non_zero has_radio" name="air_changes" min="0" placeholder="(h⁻¹) only fresh air"><br>
</div>
<div id="DIVnatural_ventilation" style="display:none">
@ -88,7 +88,7 @@
<label for="hepa_no">No</label>&nbsp;&nbsp;
<input type="radio" id="hepa_yes" name="hepa_option" value=1 onclick="require_fields(this)">
<label for="hepa_yes">Yes</label>&nbsp;&nbsp;
<input type="number" step="any" id="hepa_amount" class="non_zero" name="hepa_amount" placeholder="(m³ / hour)" min="0" onclick="check_radio('#hepa_yes')">
<input type="number" step="any" id="hepa_amount" class="non_zero has_radio" name="hepa_amount" placeholder="(m³ / hour)" min="0">
<hr width="80%">
<b>Face masks:</b>
@ -140,13 +140,13 @@
<div data-tooltip="Select the date for one-off events or the month if the event is recurrent in the same space.">
<span class="tooltip_text">?</span>
</div><br>
<input type="radio" id="event_type_single" name="event_type" value="single_event" onclick="require_fields(this)" required>
<input type="radio" tabindex="-1" id="event_type_single" name="event_type" value="single_event" onclick="require_fields(this)" required>
<label for="event_type_single">Single event</label> &nbsp;&nbsp;
<label for="event_type_single">Date: </label>
<input type="text" id="single_event_date" class="datepicker" name="single_event_date" placeholder="dd/mm/yyyy" onclick="check_radio('#event_type_single')"><br>
<input type="radio" id="event_type_recurrent" name="event_type" value="recurrent_event" onclick="require_fields(this)" required>
<input type="text" id="single_event_date" class="datepicker has_radio" name="single_event_date" placeholder="dd/mm/yyyy"><br>
<input type="radio" tabindex="-1" id="event_type_recurrent" name="event_type" value="recurrent_event" onclick="require_fields(this)" required>
<label for="event_type_recurrent">Recurrent usage</label>
<select id="recurrent_event_month" name="recurrent_event_month" onclick="check_radio('#event_type_recurrent')">
<select id="recurrent_event_month" name="recurrent_event_month" class="has_radio">
<option value="January">January</option>
<option value="February">February</option>
<option value="March">March</option>