Ajax没有调用php文件？

I am trying to get the price of Item after selecting the item in a dropdown. I have used ajax calls but my code is not going inside $.ajax({.... What is wrong with my code?

I have used alert in the php file but nothing displays, which means my code is not calling php file.

<script type='text/javascript'>
            $("#puja_name2").on('change',function()
            {   
                var id=$(this).val();
                var data = 'id='+ id;
                $.ajax({
                    type: "POST",
                    url: "../ajax_price.php",
                    data: data,
                    cache: false,
                    success: function(html)
                    {
                        $("#puja_price2").html(data);
                
                    }
                
                });
            });
    </script>

<div class="form-group">
  <label>
  Puja Name<span class="font-red">* </span>:
  </label>
                                
  <select class="form-control" name="puja_name2" id="puja_name2"  data-validetta="required">
   <option value="">Select Puja Name</option>
    <?php
                                                          
    $SQL_STATEMENT_puja = $DatabaseCo->dbLink->query("SELECT * FROM puja_type ");
   while($DatabaseCo->dbRow = mysqli_fetch_object($SQL_STATEMENT_puja)){
    ?>
 <option value="<?php echo $DatabaseCo->dbRow->puja_id; ?>" ><?php echo $DatabaseCo->dbRow->puja_name; ?></option>
   <?php                                 
    } 
                                ?>
 </select>
 </div>
                        
 <div class="form-group">
    <label> Price <span class="font-red">* </span>:</label>
  <select  id="puja_price2" >
                                    
    </select>                                      
 </div>

</div>

You must change in jquery puja_name to puja_id:

$("#puja_id").on('change',function()

Try this in your JS code.


<script src="jquery.js"></script>


    <script type='text/javascript'>
        $(document).ready(function(){

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

                var id = $(this).val();
                var data = 'id='+id;

                $.ajax({
                    type: "POST",
                    url: "../ajax_price.php",       
                    data: data,
                    cache: false,
                    success:function(res){
                    $('#puja_price2').html(res);
                    }
                });

    }); 
}); 
</script>

A couple things wrong with your code bud:

1) You have

$(document).ready(function(){
<script>
//code
</script>
}

What your code should look like is:

<script type="text/javascript">
$(document).ready(function() {
//code
});
</script>

If you need to add comments in your JS code, DO NOT use <!-- -->. Instead use // like you see in my code above.

2) You need to change in your jquery puja_name to puja_id because your <select></select> id is puja_id so:
this
$("#puja_name").on('change',function() {
turns to this
$("#puja_id").on('change',function() {

3) I'm not the greatest at SQL statements but I do feel that using the code below would help you even more (you don't HAVE to).

<?php

$SQL_STATEMENT_puja = "SELECT * FROM puja_type WHERE status='APPROVED' ORDER BY puja_name ASC";
$DatabaseCo = $conn->query($SQL_STATEMENT_puja);

$puja=$row['puja']; //This should actually be $puja=$row['puja_id'];

while($row = $DatabaseCo->fetch_assoc()) {

?>
<option value="<?php echo $row['puja_id']; ?>" <?php if($row['puja_id']==$puja) { echo "selected"; } ?>><?php echo $row['>puja_name']; ?></option>
<?php
}
?>

4) In your JQuery you have it as $("#puja_price").html(html); it should be $("#puja_price").html(data);

5) I also see that you have it as #puja_price but there's nothing in your html that has the id of puja_price so

I recommend changing this
$("#puja_price").html(html);
to
$("#puja_price2").html(data);

6) Your JQuery code is
$.ajax ({
When it should be: $.ajax({

Full code:

<div class="form-group">
    <label>
    Puja Name<span class="font-red">* </span>:
    </label>
    <select class="form-control" name="puja_id" id="puja_id" data-validetta="required">
        <option value="">Select Puja Name</option>
        <?php
            //If you already have the connection setup you don't need to add this
            $servername = "localhost";
            $username = "username";
            $password = "password";
            $dbname = "myDB";

            // Create connection
            $conn = new mysqli($servername, $username, $password, $dbname);
            // Check connection
            if ($conn->connect_error) {
                die("Connection failed: " . $conn->connect_error);
            } 

            $SQL_STATEMENT_puja = "SELECT * FROM puja_type WHERE status='APPROVED' ORDER BY puja_name ASC";
            $DatabaseCo = $conn->query($SQL_STATEMENT_puja);

            $puja=$row['puja'];

            while($row = $DatabaseCo->fetch_assoc()) {

        ?>
        <option value="<?php echo $row['puja_id']; ?>" <?php if($row['puja_id']==$puja) { echo "selected"; } ?>><?php echo $row['>puja_name']; ?></option>
        <?php

            }

        ?>
    </select>
</div>
<div class="form-group">
    <label>
        Price <span class="font-red">* </span>:
    </label>
    <input type="text" class="form-control " id="puja_price2" name="puja_price2" disabled>
</div>

<script type="text/javascript">
$(document).ready(function() {
    $("#puja_id").on('change',function() {
        var id=$(this).val();
        var data = 'id='+ id;
        $.ajax({
            type: "POST",
            url: "../ajax_price.php",
            cache: false,
            data: data,
            success: function(html) {
                $("#puja_price2").html(data);
            }
        });
    });
});
</script>

Let me know if the changes work for you