使用 AJAX 填充基于下拉菜单的文本值

问题描述 投票：0回答：2

我有两个文件。使用一个我创建了一个下拉菜单和文本框，应该根据下拉菜单的选择来填充它们。我已经能够创建下拉菜单和文本框，但它们似乎没有正确填充。我的最终目标是根据下拉菜单选择更改文本框值。我是 php 和 js 的新手，所以如果我的代码中有任何明显的错误，请随时解决。非常感谢您的帮助。只是为了扩展表名是 Colleges.

<?php 
include "connect.php";
$db = new mysqli('localhost', $dbuser, $dbpass, $dbname);
?>
<!doctype html>
<html>
<head>
    <title>College Compare</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 wdrawal= response[i]["wdrawal"];
                    document.getElementById('snn').value=response[i]['School Name'];
                    document.getElementById('gpa').value=response[i]['Avg GPA'];
                    document.getElementById('sat').value=response[i]['Avg SAT'];
                    document.getElementById('c15').value=response[i]['c15'];
                    document.getElementById('earnings').value=response[i]['earnings'];
                    document.getElementById('wdrawal').value=response[i]['wdrawal'];

                }
            }
        });
    });

});
    </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>";
}   
    ?>
</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 "connect.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 'Colleges' 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($coll_array);
javascript php html ajax mysqli
2个回答
0
投票

我有一个类似的问题，虽然不太确定答案会是什么样子..

0
投票

据我所知，您的代码有一些问题需要修复。

首先，将

id
属性更新为
<select>
元素以匹配JavaScript代码：

<select name="Schoolnames" id="coll_array">

然后在

<option>
值中，去掉花括号：

echo "<option value='".$d['School Name']."'>".$d['School Name']."</option>";

在 PHP 代码的最后一部分之后，将 

$sql
查询更改为：

$sql = "SELECT * FROM `Colleges` WHERE `School Name`='".$departid."'";

然后，通过将 

url
属性设置为当前文件来更新您的 AJAX 调用（假设 JavaScript、HTML 和 PHP 代码在同一个文件中）。如果您使用的是单独的 PHP 文件，请确保文件名正确：

url: 'your_php_file_name.php',

最后确保将底部的 PHP 代码与 HTML 代码分开。您可以将它放在文件的顶部或单独的文件中。

让我知道这对你来说如何。 :)

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.