Ajax multiple dropdown return value- php mysql

Question

i had 4 table like this

And then im going to fill this 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();

check in the console if you find any error there? after changing the itemtype and treatment — Prateik Darji
– Prateik Darji, Commented Dec 8, 2017 at 12:02
one more thing I found in your code is you have taken $(this).val() for both change, so the thing is once you change the ItemType it will assign the same id to both of the variables, and after that you are going to change treatment which means again change the value of both the variable, which means the result you are getting is the same treatmentid and type id which is totally wrong. — Prateik Darji
– Prateik Darji, Commented Dec 8, 2017 at 12:06
@Prateik it say the itemtype and treatment and the Price, but if i change the option, the treatment result will follow the itemtype value. yes i mean that thing, it changed to itemtype and following on it. yeah i know that's my problem, then how can i make it dynamic? — Ary Maulana
– Ary Maulana, Commented Dec 8, 2017 at 14:36
@devsourav i got the correct Price value. buat cant change the selected item — Ary Maulana
– Ary Maulana, Commented Dec 8, 2017 at 14:39

devsourav · Accepted Answer · 2017-12-08 15:33:02Z

1

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); 
        }
    });
});

answered Dec 8, 2017 at 15:33

devsourav

2,5311 gold badge15 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Ajax multiple dropdown return value- php mysql

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related