Task 2
Design a form for the Patient Satisfaction Survey for a particular hospital having the following fields:
- Patient’s Name
- Patient’s File number
- Unit of Hospital (Surgery, Medicine, etc)
- Are you satisfied with overall treatment (Very Satisfied |Satisfied Not Satisfied )
- Are you satisfied with medical facilities in the hospital (Very Satisfied |Satisfied |Not Satisfied)
- Overall Comments
- Submit
- Reset
<!DOCTYPE html>
<html>
<head>
<style>
.flex {
display: grid;
padding: 5px;
grid-template-columns: 50% 50% ;
width: 100%;
}
.bigger-font {
font-size: larger;
font-weight: bold;
}
.label-text {
color: blue;
text-align: justify;
background-color: chartreuse;
}
.label-div {
display: inline-block;
}
.input-cap {
text-transform: uppercase;
background-color: darkgray;
color: crimson;
}
</style>
<script>
function isNullOrEmpty(element) {
if ((element.value?.length ?? 0) === 0) {
element.style.backgroundColor='#ff0000';
} else {
console.log(`Element value is ${element.value}, length = ${element.value?.length},
${typeof element.value?.length}`);
}
}
function setDefaultStyleForElement(element) {
element.style.backgroundColor='#ffffff';
}
function isSelectionEmpty(element) {
if ((element.value?? "nil") === "nil") {
element.style.backgroundColor='#ff0000';
} else {
element.style.backgroundColor='#ffffff';
}
}
function doValidate() {
const pname = document.getElementById('pname');
const fname = document.getElementById('fnumber');
const unit = document.getElementById('unit');
const satisfaction = document.getElementById('satisfaction');
const unit_satisfaction = document.getElementById('med-satisfaction');
isNullOrEmpty(pname);
isNullOrEmpty(fname);
isSelectionEmpty(unit);
isSelectionEmpty(satisfaction);
isSelectionEmpty(unit_satisfaction);
}
function onSelect(selectElement) {
console.log(`value selected is ${selectElement.value}, Type = ${typeof selectElement.value}`);
if (selectElement.value === "nil") {
selectElement.style.backgroundColor="#ff0000";
} else {
selectElement.style.backgroundColor='#ffffff';
}
}
function doReset() {
const pname = document.getElementById('pname');
const fname = document.getElementById('fnumber');
const unit = document.getElementById('unit');
const satisfaction = document.getElementById('satisfaction');
const unit_satisfaction = document.getElementById('med-satisfaction');
const defaultValues = new Map([
['pname',""],
['fnumber', ""],
['comment',""],
['unit', "nil"],
['satisfaction',"nil"],
['med-satisfaction',"nil"]
]);
pname.value = "";
fname.value = "";
unit.value = "nil";
satisfaction.value = "nil";
unit_satisfaction.value = "nil";
defaultValues.forEach((defval, element)=> {
console.log(`Setting ${element} value to ${defval}`);
document.getElementById(element).value = defval;
setDefaultStyleForElement(document.getElementById(element));
});
}
</script>
</head>
<body>
<form>
<div class="flex">
<label class="label-div label-text bigger-font" >Patient's Name</label>
<input type="text" class="bigger-font input-cap label-div" id="pname" />
</div>
<hr/>
<div class="flex">
<label class="label-div label-text bigger-font" >Patient's File Number</label>
<input type="text" class="bigger-font input-cap label-div" id="fnumber" />
</div>
<hr/>
<div class="flex">
<label class="label-div label-text bigger-font" >Unit of Hospital</label>
<select name="unit" id="unit" class="bigger-font" onchange="onSelect(this)">
<option value="nil"></option>
<option value="surgery"> Surgery </option>
<option value="medicine"> Medicine </option>
<option value="orthoPaedic"> OrthoPaedic </option>
<option value="paediatrics"> Paediatrics </option>
<option value="gyanecologist"> Gyanecologist </option>
</select>
</div>
<hr/>
<div class="flex">
<label class="label-div label-text bigger-font" >Are you satisfied with treatment</label>
<select name="satisfaction" id="satisfaction" class="bigger-font" onchange="onSelect(this)">
<option value="nil"></option>
<option value="yes">Satisfied</option>
<option value="no">Not Satisfied</option>
<option value="great">Very Satisfied</option>
</select>
</div>
<hr/>
<div class="flex">
<label class="label-div label-text bigger-font" >Are you satisfied with medical facilities in the hospital.</label>
<select name="satisfaction" id="med-satisfaction" class="bigger-font" onchange="onSelect(this)">
<option value="nil"></option>
<option value="yes">Satisfied</option>
<option value="no">Not Satisfied</option>
<option value="great">Very Satisfied</option>
</select>
</div>
<hr/>
<div class="flex">
<label class="label-div label-text bigger-font" >Comments</label>
<textarea id="comment" placeholder="Your comments / feedback"></textarea>
</div>
<hr/>
<div class="flex">
<button onclick="doValidate()" value="submit" type="button">Submit</button>
<button onclick="doReset()" value="reset" type="button">Reset</button>
</div>
</form>
</body>
</html>