I have two files. Using one I created a drop down and text boxes that should be filled based on a selection of the drop down menu. I have been able to create the drop down menu along with the text boxes but they do not seem to be filling properly. My end goal is for the text boxes value to change based on the drop down menu selection. I am pretty new to php and js so if there are any obvious errors in my code feel free to address them. I really appreciate the help.
<?php
include "connect.php";
$db = new mysqli('localhost', $dbuser, $dbpass, $dbname);
?>
<!doctype html>
<html>
<head>
<title>How to Auto populate dropdown with jQuery AJAX</title>
<link href="style.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#coll_array").change(function(){
var colid = $(this).val();
$.ajax({
url: 'new.php',
type: 'post',
data: {col:colid},
dataType: 'json',
success:function(response){
var len = response.length;
$("#coll_array").empty();
for( var i = 0; i<len; i++){
var snn = response[i]['School Name'];
var gpa = response[i]['Avg GPA'];
var sat = response[i]['Avg SAT'];
var c15= response[i]['c15'];
var earnings= response[i]['earnings'];
var wdraw= response[i]["wdrawal"]
$("#snn")=snn;
$("#gpa")=gpa;
$("#sat")=sat;
$("#c15")=c15;
$("#earnings")=earnings;
$("#wdrawal")=wdrawal;
$("#coll_array")=coll_array;
}
}
});
});
});
</script>
</head>
<body>
<?php
include ("connect.php");
$db = new mysqli('localhost', $dbuser, $dbpass, $dbname);
if (!$db) {
exit('Connect Error (' . mysqli_connect_errno() . ') '
. mysqli_connect_error());
}
?>
<div class="label">Select Name:</div>
<select name="Schoolnames">
<option value = ""></option>
<?php
$queryusers = "SELECT `School Name` FROM `Colleges` ";
$db = mysqli_query($db,$queryusers);
while ( $d=mysqli_fetch_assoc($db)) {
echo "<option value='{".$d['School Name']."}'>".$d['School Name']."</option>";
} echo json_encode($Schoolnames);
?>
</select>
<div class="clear"></div>
<div class="container">
<div class="column">
<div class="table-responsive">
<table class="table table-bordered">
<th>Average GPA</th>
<th>Average SAT</th>
<th>6 Year Graduation Rate</th>
<th>Median Earnings 6 Years After Graduation</th>
<th>3 Year Withdrawal Rate</th>
</thead>
<tbody>
<div class="container">
<div class="textbox">
<div class="table-responsive">
<table class="table table-bordered">
School Name: <input type="text" id="snn" value="">
Avg GPA: <input type="text" id="gpa" value="">
Avg SAT: <input type="text" id="sat" value="">
6 Year Grad Rate: <input type="text" id="c15" value="">
Median Earnings 6 Years After Graduation: <input type="text" id="earnings" value="">
3 Year Withdrawal Rate: <input type="text" id="wdrawal" value="">
</thead>
<tbody>
<?php
include "config.php";
$con = new mysqli('localhost', $dbuser, $dbpass, $dbname);
$departid = 0;
if(isset($_POST['col'])){
$departid = mysqli_real_escape_string($con,$_POST['col']); // department id
}
if (!empty($departid)){
$sql = "SELECT * FROM users WHERE 'School Name'=".$departid;
$result = mysqli_query($con,$sql);
while( $row = mysqli_fetch_array($result) ){
$sat = $row['Avg SAT'];
$gpa = $row['Avg GPA'];
$snn = $row['School Name'];
$c15 = $row['c15'];
$earnings = $row['earnings'];
$wdrawal = $row['wdrawal'];
$coll_arr[] = array("School Name" => $snn, "Avg GPA" => $gpa, "Avg SAT" => $sat, "c15" => $c15, "earnings" => $earnings, "wdrawal" => $wdrawal);
}
}
// encoding array to json format
echo json_encode($sat,$gpa,$snn,$c15,$earnings,$wdrawal);
echo json_encode($coll_array);