Merge branch 'develop/form-fixes' into 'master'

Fixed issues with form submission

See merge request cara/cara!43
This commit is contained in:
Philip James Elson 2020-11-06 15:19:04 +00:00
commit 3899a403c3
2 changed files with 62 additions and 31 deletions

View file

@ -18,7 +18,7 @@
Beta v1.0.0 <span style="float:right; font-weight:bold">Please send feedback to <a href="mailto:CARA-dev@cern.ch">CARA-dev@cern.ch</a></span>
<h1> <p><b>CARA</b> Covid Airborne Risk Assessment tool</p></h1>
<form id="covid_calculator" name="covid_calculator" action="/calculator/report" method="POST">
<form id="covid_calculator" name="covid_calculator" action="/calculator/report" method="POST"> <!--DEBUG onsubmit="debug_submit(this)"-->
<div style="width: 33%; float:left;">
@ -36,14 +36,15 @@ Beta v1.0.0 <span style="float:right; font-weight:bold">Please send feedback to
<!-- Ventilation Options -->
Ventilation type:
<input type="radio" id="mechanical" name="ventilation_type" value="mechanical" onclick="show_hide('DIVmechanical_ventilation', 'DIVnatural_ventilation', this)">Mechanical</input>
<input type="radio" id="natural" name="ventilation_type" value="natural" onclick="show_hide('DIVnatural_ventilation', 'DIVmechanical_ventilation', this)">Natural</input><br>
<input type="hidden" id="no_ventilation" name="ventilation_type" value="" />
<input type="hidden" id="ventilation_type" name="ventilation_type" value=""/>
<input type="radio" id="mechanical" name="RADIO_ventilation_type" value="mechanical" onclick="show_hide('DIVmechanical_ventilation', 'DIVnatural_ventilation', this)">Mechanical</input>
<input type="radio" id="natural" name="RADIO_ventilation_type" value="natural" onclick="show_hide('DIVnatural_ventilation', 'DIVmechanical_ventilation', this)">Natural</input><br>
<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)">
Air supply flow rate &nbsp;&nbsp; <input type="number" step=0.01 id="air_supply" name="air_supply" min="0" placeholder="(m³)"><br>
<input type="radio" id="air_type_changes" name="mechanical_ventilation_type" value="air_changes" onclick="require_fields(this)">
<input type="hidden" id="mechanical_ventilation_type" name="mechanical_ventilation_type" value=""/>
<input type="radio" id="air_type_supply" name="RADIO_mechanical_ventilation_type" value="air_supply" onclick="require_fields(this)">
Air supply flow rate &nbsp;&nbsp; <input type="number" step=0.01 id="air_supply" name="air_supply" min="0" placeholder="(m³ / hour)"><br>
<input type="radio" id="air_type_changes" name="RADIO_mechanical_ventilation_type" value="air_changes" onclick="require_fields(this)">
Air changes per hour &nbsp;&nbsp; <input type="number" step=0.01 id="air_changes" name="air_changes" min="0"><br>
</div>
@ -90,11 +91,11 @@ Beta v1.0.0 <span style="float:right; font-weight:bold">Please send feedback to
<hr width="80%">
When is the event?<br>
<input type="radio" id="event_type_single" name="event_type" value="single_event" onclick="require_fields(this)"></input>
<input type="radio" id="event_type_single" name="event_type" value="single_event" onclick="require_fields(this)" required></input>
<label for="event_type_single">Single event</label> &nbsp;&nbsp;
<label for="datepicker">Date: </label>
<input type="text" id="datepicker" name="single_event_date"><br>
<input type="radio" id="event_type_recurrent" name="event_type" value="recurrent_event" onclick="require_fields(this)"></input>
<input type="radio" id="event_type_recurrent" name="event_type" value="recurrent_event" onclick="require_fields(this)" required></input>
<label for="event_type_recurrent">Recurrent usage</label>
<select id="recurrent_event_month" name="recurrent_event_month">
<option value="January">January</option>

View file

@ -12,19 +12,21 @@ function show(show, var_id, obj) {
}
function show_hide(show, hide, obj) {
var show = document.getElementById(show);
var hide = document.getElementById(hide);
var no_ventilation = document.getElementById("no_ventilation");
var ventilation_type = document.getElementById("ventilation_type");
var mechanical_ventilation_type = document.getElementById("mechanical_ventilation_type");
if (show.style.display === "block") {
show.style.display = "none";
obj.checked = false;
no_ventilation.checked = true;
ventilation_type.value = "";
mechanical_ventilation_type.value = "";
} else if (show.style.display === "none") {
show.style.display = "block";
hide.style.display = "none";
require_fields(obj);
ventilation_type.value = obj.id;
} }
/* -------Required fields------- */
@ -71,37 +73,46 @@ function require_fields(obj){
} }
function require_room_volume(option) {
$("#room_volume").prop('required',option);
$("#room_volume").prop('required',option);
}
function require_room_dimensions(option) {
$("#floor_area").prop('required',option);
$("#ceiling_height").prop('required',option);
$("#floor_area").prop('required',option);
$("#ceiling_height").prop('required',option);
}
function require_mechanical_ventilation(option) {
$("#air_type_changes").prop('required',option);
$("#air_type_supply").prop('required',option);
}
$("#air_type_changes").prop('required',option);
$("#air_type_supply").prop('required',option);
if (!option) {
var mechanical_ventilation_type = document.getElementById("mechanical_ventilation_type");
mechanical_ventilation_type.value = "";
} }
function require_natural_ventilation(option) {
$("#windows_number").prop('required',option);
$("#window_height").prop('required',option);
$("#window_width").prop('required',option);
$("#opening_distance").prop('required',option);
$("#always").prop('required',option);
$("#interval").prop('required',option);
$("#event_type_single").prop('required',option);
$("#event_type_recurrent").prop('required',option);
$("#windows_number").prop('required',option);
$("#window_height").prop('required',option);
$("#window_width").prop('required',option);
$("#opening_distance").prop('required',option);
$("#always").prop('required',option);
$("#interval").prop('required',option);
$("#event_type_single").prop('required',option);
$("#event_type_recurrent").prop('required',option);
}
function require_air_changes(option) {
$("#air_changes").prop('required',option);
}
$("#air_changes").prop('required',option);
if (option) {
var mechanical_ventilation_type = document.getElementById("mechanical_ventilation_type");
mechanical_ventilation_type.value = "air_changes";
} }
function require_air_supply(option) {
$("#air_supply").prop('required',option);
}
$("#air_supply").prop('required',option);
if (option) {
var mechanical_ventilation_type = document.getElementById("mechanical_ventilation_type");
mechanical_ventilation_type.value = "air_supply";
} }
function require_single_event(option) {
$("#datepicker").prop('required',option);
@ -136,5 +147,24 @@ function show_disclaimer() {
btnText.innerHTML = "Read less";
moreText.style.display = "inline";
$("#DIALOG_welcome").dialog("option", "height", 600);
}
} }
/* -------Debugging------- */
function debug_submit(form){
//Prevent default posting of form - put here to work in case of errors
event.preventDefault();
//Serialize the data in the form
var serializedData = objectifyForm($(form).serializeArray());
console.log( serializedData );
return false; //don't submit
}
function objectifyForm(formArray) {
var returnArray = {};
for (var i = 0; i < formArray.length; i++)
returnArray[formArray[i]['name']] = formArray[i]['value'];
return returnArray;
}