根据先前的表单输入和来自MySQL的数据填充下拉列表

Question

I have a form which asks customer for some details. I want the final dropdown list to be populated based on the inputs from the customer. The data for this dropdown list is taken from MySql database using PHP. here is the code i have prepared but it does not seem to work.

Form code:

               <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> 

The Amount dropdownlist must be populated with data from MySQL based on the Trade, Item and the Date.

here is my jquery for this:

$(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',
        });
    }
    });
  });
  });

and here is the php query (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

After experimenting a bit with the code, this works for me:

form code change: add onchange="getAmount(this.value);" to the date select

           <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 code change: assign the data from the php to the amount select using its id.

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 code change: echo the query result as option values.

<?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;

?>