Can anyone assist me in combining multiple functions within the same form using AJAX? The purpose of the form is to prenote a new "meeting" and it consists of an input for the date and a select dropdown for choosing the operator.
FORM CODE:
<div id="info"></div>
<form>
<div id="input-form">
<input type="date" name="data" id="dataApp" onChange="checkDate()" required>
</div>
<div id="divSquadre">
<select name="squadra" onChange="orariApp()" id="squadra" required>
<option value="0">Operator 1</option>
<option value="1">Operator 2</option>
<option value="2">Operator 3</option>
</select>
</div>
</form>
The first function, checkDate, validates the input date in the database and updates the select dropdown with only the available operators. The second function, orariApp, currently displays an alert when called, serving as a debugging tool.
JS CODE:
function checkDate() {
var data=document.getElementById("dataApp").value;
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("divSquadre").innerHTML = this.responseText;
}
};
xmlhttp.open("GET", "./ajax/checkSquadreInDataApp.php?data=" + data , true);
xmlhttp.send();
}
function orariApp() {
//if run function checkDate() this function doesn't work
alert("i'm working :)");
}
PHP checkSquadreInDataApp.php:
<?php
$data=$_REQUEST["data"];
$query = $mysqli->query('SELECT * FROM operators where data like "'.$data.'" and active is not null'); //example query
$squadra=$query->fetch_all(MYSQLI_BOTH);
echo '<select name="squadra" onChange="orariApp()" id="squadra" required>';
foreach($squadra as $el){
echo '<option value="'.$el['id'].'">'.$el['id'].'</option>';
}
echo '</select>';
Prior to changing the date (initiating the checkDate function), the orariApp function works fine. However, once the checkDate function modifies the div "divSquadra," the orariApp function stops functioning. Any assistance would be greatly appreciated!
Apologies for any language errors in English :)