passing 2 values from dropdown in php using ajax - php

Question

I have been creating a system as a project on school. I have encountered a problem in getting values using ajax. I wanted to get values from the qselCampus dropdown and the qselCollege dropdown, then pass its values to a php file and use it on a query that will populate the third dropdown. The problem is, I cannot get the right values on the third dropdown. I am just a beginner in PHP and AJAX.
Here is my AJAX code:
$(document).ready(function() {
$("#qselBranch").change(function() {
var branchid = $(this).val();
if(branchid != "") {
$.ajax({
url:"getprof.php",
data:{txtbid:branchid},
type:'POST',
success:function(response) {
var resp = $.trim(response);
//console.log(resp);
$("#qselProf").html(resp);
}
});
} else {
$("#qselProf").html("<option value=''>------- Select --------</option>");
}
});
});
$(document).ready(function() {
$("#qselCollege").change(function() {
var collegeid = $(this).val();
if(collegeid != "") {
$.ajax({
url:"getprof.php",
data:{txtcid:collegeid},
type:'POST',
success:function(response) {
var resp = $.trim(response);
console.log(resp);
$("#qselProf").html(resp);
}
});
} else {
$("#qselProf").html("<option value=''>------- Select --------</option>");
}
});
});
Here is my PHP Code:
<?php
if(isset($_POST['txtbid'])){
$strGetValue = mysqli_real_escape_string($objConn, $_POST['txtbid']);
$strGetValue2 = mysqli_real_escape_string($objConn, $_POST['txtcid']);
echo $strGetValue;
$strStmtGetProf = "SELECT
strTeacherInfoID
, strFirstName
, strMiddleName
, strLastName
, strCampus
FROM tblteachers
WHERE strCampus = '$strGetValue' AND strCollege = '$strGetValue2'";
$objResult = mysqli_query($objConn, $strStmtGetProf) or trigger_error("Query Failed! SQL: Error: ".mysqli_error($objConn), E_USER_ERROR);
echo "<option value=''>------- Select --------</option>";
//echo $strGetValue2;
while($objFetch = mysqli_fetch_array($objResult)){
$strTID = $objFetch['strTeacherInfoID'];
$strFirstName = $objFetch['strFirstName'];
$strLastName = $objFetch['strLastName'];
$strCampus = $objFetch['strCampus'];
//echo $strGetValue;
echo '<option value="' . $strTID . '">' .$strLastName. ", " .$strFirstName. " | Branch: " .$strCampus. '</option>';
}
}
?>
And here is the HTML part:
<div class="form-row col-md-8">
<label>Campus Branch
<select name="qselBranch" id="qselBranch" required class="form-control">
<option value="">------- Select --------</option>
<option value="Bansud">Bansud</option>
<option value="Bataan">Bataan</option>
<option value="Biñan">Biñan</option>
<option value="Cabiao">Cabiao</option>
<option value="Lopez">Lopez</option>
<option value="Mabini">Mabini</option>
<option value="Maragondon">Maragondon</option>
<option value="Mulanay">Mulanay</option>
<option value="Parañaque">Parañaque</option>
<option value="Pulilan">Pulilan</option>
<option value="Quezon">Quezon</option>
<option value="Ragay">Ragay</option>
<!--<option value="Sablayan">Sablayan</option>-->
<option value="San Juan">San Juan</option>
<option value="San Pedro">San Pedro</option>
<option value="Sta. Maria">Sta. Maria</option>
<option value="Sta. Rosa">Sta. Rosa</option>
<option value="Sto. Tomas">Sto. Tomas</option>
<option value="Taguig">Taguig</option>
<option value="Unisan">Unisan</option>
</select>
</label>
</div>
<div class="form-row">
<label>
College/Faculty:
<select name="qselCollege" required class="form-control">
<option value="">------- Select --------</option>
<option value="CAF">College of Accountancy and Finance (CAF)</option>
<option value="CAFA">College of Architecture and Fine Arts (CAFA)</option>
<option value="CAL">College of Arts and Letters (CAL)</option>
<option value="CBA">College of Business Administration (CBA)</option>
<option value="COC">College of Communication (COC)</option>
<option value="CCIS">College of Computer and Information Sciences (CCIS)</option>
<option value="COED">College of Education (COED)</option>
<option value="CE">College of Engineering (CE)</option>
<option value="CHK">College of Human Kinetics (CHK)</option>
<option value="CL">College of Law (CL)</option>
<option value="CPSPA">College of Political Science and Public Administration (CPSPA)</option>
<option value="CSSD">College of Social Sciences and Development (CSSD)</option>
<option value="CS">College of Science (CS)</option>
<option value="CTHTM">College of Tourism, Hospitality and Transportation Management (CTHTM)</option>
</select>
</label>
</div>

Answer 1

Right now, you have 2 different Ajax call and you use both data in your php...even if you send them one by one. First, try to make ONE ajax call when you change a value in your form and if you have two value different than " ". It should look like this :
JS :
$(document).ready(function() {
$("#qselBranch, #qselCollege").change(function() { // On change for each form
var branchid = $("#selBranch").val();
var collegeid = $("#qselCollege").val();
if(branchid != "" && collegeid != "") { // check if both value are not empty
$.ajax({
url:"getprof.php",
data:{txtbid:branchid,txtcid:collegeid}, // send both value in one time
type:'POST',
success:function(response) {
var resp = $.trim(response);
//console.log(resp);
$("#qselProf").html(resp);
}
});
} else {
$("#qselProf").html("<option value=''>------- Select --------</option>");
}
});
});
PHP :
<?php
// I change nothing, juste add a double $_POST condition
if(isset($_POST['txtbid']) && isset($_POST['txtcid'])){
$strGetValue = mysqli_real_escape_string($objConn, $_POST['txtbid']);
$strGetValue2 = mysqli_real_escape_string($objConn, $_POST['txtcid']);
echo $strGetValue;
$strStmtGetProf = "SELECT
strTeacherInfoID
, strFirstName
, strMiddleName
, strLastName
, strCampus
FROM tblteachers
WHERE strCampus = '$strGetValue' AND strCollege =
'$strGetValue2'";
$objResult = mysqli_query($objConn, $strStmtGetProf) or trigger_error("Query Failed! SQL: Error: ".mysqli_error($objConn), E_USER_ERROR);
echo "<option value=''>------- Select --------</option>";
//echo $strGetValue2;
while($objFetch = mysqli_fetch_array($objResult)){
$strTID = $objFetch['strTeacherInfoID'];
$strFirstName = $objFetch['strFirstName'];
$strLastName = $objFetch['strLastName'];
$strCampus = $objFetch['strCampus'];
//echo $strGetValue;
echo '<option value="' . $strTID . '">' .$strLastName. ", " .$strFirstName. " | Branch: " .$strCampus. '</option>';
}
}
?>
Is it what you are looking for? Tell me if it works please :)