CODEWITHSUNDEEP
phphtmlajax
Steve Kush
Steve Kush

Reputation: 143

AJAX request not returning data back to the select option box

Goodday, recently ive tried to learn AJAX. Ive made up an example that captures the data selected from the 1st dropdown box and filter into the 2nd dropdown box. However, the AJAX request doesnt seem to run.

HTML

<?php include 'conn.php' ?>
<!DOCTYPE html>
<html>
<head>
<title>
AJAX for extensions!
</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
function fetch_select(val)
{
    $.ajax({
        type: 'post',
        url: 'fetch_data.php',
        data: {
            get_option:val
        },
        success: function (response) {
            document.getElementByID("owner_id").innerHTML=response;
        }
    });
}
</script>
</head>
<body>
<p id="heading">Dynamic Select Option Menu Using Ajax and PHP for Extensions</p>
<center>
<div id="select_box">
    <select name="department" id="department" onchange="fetch_select(this.value);">
    <option value="">Select Option</option>
    <?php 
        $sql="SELECT Department1 FROM PIC_Approval";
        $result=odbc_exec($conn,$sql);
        while($row=odbc_fetch_array($result)){
            $department=$row['Department1']; ?>
        <option value="<?php echo $department;?>"><?php echo $department;?></option>
    <?php  }
    ?>
    </select>

    <select name="ownerid" id="owner_id">
    </select>
</div>
</center>
</body>
</html>

fetch_data.php

<?php
include 'conn.php';
if(isset($_POST['get_option']))
{
    echo $_POST['get_option'];
 $department = $_POST['get_option'];
 $sql1="SELECT Owner_I_Employee_ID FROM masterlist1 WHERE Department1='$department'";
 $result1=odbc_exec($conn,$sql1);
 while($row=odbc_fetch_array($result1))
 { 
     $id=$row['Owner_I_Employee_ID']; ?>
    <option value="<?php echo $id;?>"><?php echo $id;?></option>
<?php   
 }
 exit;
}
?>

I am not sure what is wrong with the Request. I followed as in the tutorials i found online. I am using odbc.

Upvotes: 0

Views: 135

Answers (1)

Steve Kush
Steve Kush

Reputation: 143

Turns out it's because

document.getElementByID("owner_id")

should be

document.getElementById("owner_id")

because JavaScript is case-sensitive. The code works fine after the error is fixed.

Upvotes: 2

Related Questions