My task involves creating a JavaScript function that updates a database table when a form item is selected. The functionality works perfectly fine.
Javascrpit:
function changeFunc(){
var selectBox = document.getElementById("supervisor");
var selectedValue = selectBox.options[selectBox.selectedIndex].value;
if(selectedValue === 1){
var jqxhr = $.ajax("<?php echo $web_root; ?
>/file/reminder/supervisor_reminder.php?super=1")
.done(function(){ alert("success, supervisor Helen has
been alerted."); })
.fail(function(){ alert("error"); });
}
}
HTML:
<div id="supervisor">
<form action="" method="">
<label>Supervisor Alert</label>
<select id="supervisor" onchange="changeFunc()">
<option value=""></option>
<option value="1">Helen</option>
<option value="2">Nancy</option>
<option value="3">Joyce</option>
<option value="4">Bob</option>
<option value="5">Herb</option>
</select>
</form>
</div>
Upon wrapping the form with the div tags, the JavaScript function ceases to work. I intended to hide the form once the table update is complete, hence the wrapping in a div for that purpose. However, this interferes with the functionality of the JavaScript. Any insights on why this might be happening or how I can achieve the form hiding using CSS would be greatly appreciated.