Ajax is not calling the php file? - php

Question

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>

Answer 1

You must change in jquery puja_name to puja_id:
$("#puja_id").on('change',function()

Answer 2

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

Answer 3

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>