CODEWITHSUNDEEP
phpjquerymysqlajaxautofill
Ary Maulana
Ary Maulana

Reputation: 47

Ajax multiple dropdown return value- php mysql

i had 4 table like this

Table

And then im going to fill this form

Form

the workflow is, when i select Item Type and Treatment, the price should be filled based on the ServicePrice Table, I can get the Price from ServicePrice, but when I check XHR on network, it shows the value of Price but its data just show for 1st time, I mean when the modal opened, it shows the first data, when the option changed, the Price value keep like the 1st time modal open. so I want whenever the Item Type or Treatment changed, I want to make the price box filled dynamically

here's my form

<tr>
    <td>Item Type</td>
    <td>
        <select name="ItemTypeID"  class="form-control"  id="ItemType" >
            <option selected=""></option>
            <?php 
            $sql2 = mysql_query("select * from itemtype");
            while($record = mysql_fetch_array($sql2)){
            ?>
                <option value="<?php echo $record['ID']; ?>" title="<?php echo $record['DefaultSpec']; ?>"> <?php echo $record["Name"]; ?> </option>
            <?php } ?>
        </select>
    </td>
</tr>

<tr>
    <td>Treatment</td>
    <td>
        <select name="TreatmentID" class="form-control" id="Treatment">
            <?php 
            $sql2 = mysql_query("select * from treatment");
            while($record = mysql_fetch_array($sql2)){
            ?>
                <option value="<?php echo $record['ID']; ?>"> <?php echo $record["Name"]; ?> </option>
            <?php } ?>
        </select>
    </td>
</tr>

and then my ajax

$("#ItemType, #Treatment").change(function(){ 
    var ItemType = $(this).val();
    var Treatment = $(this).val(); 
    console.log(Treatment);
    console.log(ItemType);
    $.ajax({ 
        type: "POST", 
        dataType: "html",
        url: "GetPrice.php", 
        data: {ItemTypeID: ItemType, TreatmentID: Treatment}, 
        success: function(result){ 
        console.log(result);
        $("#Price").val(result); 
    });
});

my GetPrice.php

<?php include "../Content/connection.php"; 

$a="SELECT * FROM ServicePrice WHERE ItemtypeID = '".$_POST["ItemTypeID"]."' AND TreatmentID = '".$_POST["TreatmentID"]."'";
$q=mysql_query($a);
while($record=mysql_fetch_array($q)){
    echo $record['Price'];
}
?>

EDIT :

im making it like this it give me correct answer but the Price value triggered only if treatment dropdown changed, how can i make it trigger by booth dropdown?

 $("#ItemType").change(function(){ 
  var ItemType = $(this).val(); 
$("#Treatment").change(function(){ 
  var Treatment = $(this).val();

Upvotes: 2

Views: 1000

Answers (1)

devsourav
devsourav

Reputation: 2531

the $(this).val() inside the change event handler will not work to get data for both the fields, instead fetch the data of ItemType and Treatment individually

$("#ItemType, #Treatment").on('change', function(){
    var ItemType = $("#ItemType").val();
    var Treatment = $("#Treatment").val(); 

    $.ajax({ 
        type: "POST",
        url: "GetPrice.php", 
        data: {ItemTypeID: ItemType, TreatmentID: Treatment}, 
        success: function(result){ 
            $("#Price").val(result); 
        }
    });
});

Upvotes: 1

Related Questions