根據先前的表單輸入和來自MySQL的數據填充下拉列表

Question

我有一張表格，要求客戶提供一些詳細信息。 我希望根據客戶的輸入來填充最終的下拉列表。 該下拉列表的數據使用PHP從MySql數據庫中獲取。 這是我准備的代碼，但似乎無法正常工作。

表單代碼：

               <tr>  
                <td><label>Trade:</label></td>
                <span class="text_11">
                <td><input type="radio" id="Buy" name="tradetype" class="listen" required value="Buy"/><radio style="font-size: 16px;"> Buy</radio>
                <input type="radio" id="Sell" name="tradetype" class="listen" value="Sell"/><radio style="font-size: 16px;"> Sell </radio></span></td>
           </tr>
           <tr>  
                <td><label>Item:</label></td>
                <span class="text_11">
                <td><input type="radio" id="Cloth" name="item" class="listen" required value="Cloth"/><radio style="font-size: 16px;"> Cloth</radio>
                <input type="radio" id="Fruit" name="item" class="listen" value="Fruit"/><radio style="font-size: 16px;"> Fruit</radio></span></td>
           </tr>
            <tr>  
                <td class="select"><label>Date:</label></td>
                    <td><select id="exdate" name="date1">
                <option value="2">Select</option>
                <?php include_once "selectdate.php"?></td>
                </select>
           </tr> 
           <tr>  
                <td class="select"><label>Amount:</label></td>
                <td><select id="noselect" name="noselect">
                <option value="1">Select</option>
                <option value="1">Choose Item</option>
                </select>
           </tr> 

金額下拉列表必須使用基於交易，項目和日期的MySQL數據填充。

這是我的jQuery的：

$(document).ready(function () {

$('#exdate').change(function () {

    var tradetype = $('[name="tradetype"]:checked').val();
    var date = $('select[name=date1]').val()
    var item = $('[name="item"]:checked').val();

    $('#confirm_tradetype').text(tradetype);
    $('#confirm_date1').text(date1);
    $('#confirm_item').text(item);

    $.ajax({
        type: "POST",
        url: "selectamount.php",
        data: {
                "tradetype": tradetype,
                "item": item,
                "date1": date1,
        },
        success: function (data) { 
        var source = 
        {
            datatype: "json",
            datafields: 
            { name: 'Amount'},
            url: 'selectamount.php'
        };
        var dataAdpater = new $.jqx.dataAdapter(source);
        $("#noselect").jqxDropDownList(
        {
        source: dataAdapter,
        displayMember: 'Amount',
        valueMember: 'Amount',
        });
    }
    });
  });
  });

這是php查詢（selectamount.php）

<?php
include_once "connect.php";
$conn = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password); 

$form=$_POST;
$trade=$form['tradetype'];
$date1=$form['date1'];
$item=$form['item'];

$stmt = $conn->query("SELECT Amount FROM Contracts WHERE Trade='$trade' AND Item='$item' AND Date='$date1' ORDER BY Amount ASC"); 
while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
   echo json_encode($row);
}

$conn->db=null;
?>

Answer 1

在嘗試了一些代碼之后，這對我有用：

更改表單代碼：添加onchange="getAmount(this.value);" 到日期選擇

           <tr>  
            <td><label>Trade:</label></td>
            <span class="text_11">
            <td><input type="radio" id="Buy" name="tradetype" class="listen" required value="Buy"/><radio style="font-size: 16px;"> Buy</radio>
            <input type="radio" id="Sell" name="tradetype" class="listen" value="Sell"/><radio style="font-size: 16px;"> Sell </radio></span></td>
       </tr>
       <tr>  
            <td><label>Item:</label></td>
            <span class="text_11">
            <td><input type="radio" id="Cloth" name="item" class="listen" required value="Cloth"/><radio style="font-size: 16px;"> Cloth</radio>
            <input type="radio" id="Fruit" name="item" class="listen" value="Fruit"/><radio style="font-size: 16px;"> Fruit</radio></span></td>
       </tr>
        <tr>  
            <td class="select"><label>Date:</label></td>
                <td><select id="exdate" name="date1" onchange="getAmount(this.value);">
            <option value="2">Select</option>
            <?php include_once "selectdate.php"?></td>
            </select>
       </tr> 
       <tr>  
            <td class="select"><label>Amount:</label></td>
            <td><select id="amount" name="amount">
            <option value="1">Select</option>
            <option value="1">Choose Item</option>
            </select>
       </tr> 

jQuery代碼更改：使用php的ID將php中的數據分配給選擇的數量。

function getAmount(val) {

var tradetype = $('[name="tradetype"]:checked').val();
var date = $('select[name=date1]').val()
var item = $('[name="item"]:checked').val();

$('#confirm_tradetype').text(tradetype);
$('#confirm_date1').text(date1);
$('#confirm_item').text(item);

$.ajax({
    type: "POST",
    url: "selectamount.php",
    data: {
            "tradetype": tradetype,
            "item": item,
            "date1": date1,
    },
    success: function (data) { 
        $("#amount").html(data);
    }
});

}

php代碼更改：將查詢結果作為選項值回顯。

<?php
include_once "connect.php";
$conn = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password); 

$form=$_POST;
$trade=$form['tradetype'];
$date1=$form['date1'];
$item=$form['item'];

$stmt = $conn->query("SELECT Amount FROM Contracts WHERE Trade='$trade' AND Item='$item' AND Date='$date1' ORDER BY Amount ASC"); 
while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
      echo "<option value='" .  $row['Amount'] . "'>" . $row['Amount'] . "</option>";
}
$conn->db=null;

?>