How do i solve this php ajax and js issue?

Question

am new with php. Am creating a form with a dropdown list option from my db, i want this option to display the rest of the details in the text field when a user select any. In the DB i have id, employee_name, employee_salary, employee_age.

This my Html file

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
    <script type="text/javascript" src="script/getData.js"></script>
</head>
<body>
<select id="employee" class="form-control" >
                <option value="" selected="selected">Select Employee Name</option>
                <?php
                $sql = "SELECT id, employee_name, employee_salary, employee_age FROM employee";
                $resultset = mysqli_query($conn, $sql);
                while( $rows = mysqli_fetch_assoc($resultset) ) { 
                ?>
                <option value="<?php echo $rows["id"]; ?>"><?php echo $rows["employee_name"]; ?></option>
                <?php } ?>
</select>
    <br>Craft 1<br>
    <input type="text" id="craft_1_points" name="craft_1_points" value="">

    <br>Craft 2<br>
    <input type="text" id="craft_2_points" name="craft_2_points" value="">
    
    <br>Craft 1<br>
    <input type="text" id="craft_3_points" name="craft_3_points" value="">

    <br>Craft 2<br>
    <input type="text" id="craft_4_points" name="craft_4_points" value="">

</body>
</html>
</center>

<?php include('include/footer.php');?>

I have managed to add the names to the drop down list which is working and i used ajax and java to link. But when i select any option e.g. Tiger Nicxin it supposed to fill the text field with the rest info of the selected name, id,age and salary. It's not working please what do i have to do.

JS file

$(document).ready(function(){   
    $("#employee").change(function() {    
        var id = $(this).find(":selected").val();
        var dataString = 'empid='+ id;    
        $.ajax({
            url: 'getlist.php',
            dataType: "json",
            data: dataString,  
            cache: false,
            success: function(empData) {
               if(empData) {
                    $("#errorMassage").addClass('hidden').text("");
                    $("#recordListing").removeClass('hidden');                          
                    $("#empcraft_1_points").val(empData.id);
                    $("#empcraft_2_points").val(empData.employee_name);
                    $("#empcraft_3_points").val(empData.employee_age);
                    $("#empcraft_4_points").val("$"+empData.employee_salary);                   
                } else {
                    $("#recordListing").addClass('hidden'); 
                    $("#errorMassage").removeClass('hidden').text("No record found!");
                }       
            } 
        });
    }) 
});

Ajax file

<?php
include_once("include/db_connect.php");
if($_REQUEST['empid']) {
    $sql = "SELECT id, employee_name, employee_salary, employee_age 
    FROM employee 
    WHERE id='".$_REQUEST['empid']."'";
    $resultSet = mysqli_query($conn, $sql); 
    $empData = array();
    while( $emp = mysqli_fetch_assoc($resultSet) ) {
        $empData = $emp;
    }
    echo json_encode($empData);
} else {
    echo 0; 
}
?>

please help me with solution

Hello and welcome. Java and JavaScript are different languages. Please next time tag accordingly :) — Federico klez Culloca, Nov 23 '22 at 15:44
You are open to [SQL Injections](https://php.net/manual/en/security.database.sql-injection.php) and should use parameterized prepared statements instead of manually building your queries. They are provided by [PDO](https://php.net/manual/pdo.prepared-statements.php) and [MySQLi](https://www.php.net/manual/en/mysqli.quickstart.prepared-statements.php). Never trust any kind of input! Even by trusted users, [you are still at risk of corrupting your data](https://bobby-tables.com/). [Escaping is not enough](https://stackoverflow.com/q/5741187). — Jason K, Nov 23 '22 at 15:51
Have you checked the web server error log? If you call the php directly do you get what you expect? Any error in the console or network tab? Not working is not a good description of a problem. — Jason K, Nov 23 '22 at 15:59
@JasonK - i dont get any error, all i get is a blank text field, when i call the php directly it worked but not with the js and ajax — testing system, Nov 24 '22 at 00:22

Half Blood · Answer 1 · 2022-11-29T13:37:07.733

in ajax your datatype changed to dataType: "json" and your id was wrong. and include your DB connection in a index file or main file you js file:

$(document).ready(function(){   
    $("#employee").change(function() { 
        var id = $(this).find(":selected").val();
        var dataString = 'empid='+ id;    
        $.ajax({
            url: 'getlist.php',
            dataType: "json",
            data: dataString,
            success: function(empData) {
               if(empData) {
                    $("#errorMassage").addClass('hidden').text("");
                    $("#recordListing").removeClass('hidden');                          
                    $("#craft_1_points").val(empData.id);
                    $("#craft_2_points").val(empData.employee_name);
                    $("#craft_3_points").val(empData.employee_age);
                    $("#craft_4_points").val("$"+empData.employee_salary);                   
                } else {
                    $("#recordListing").addClass('hidden'); 
                    $("#errorMassage").removeClass('hidden').text("No record found!");
                }       
            } 
        });
    }) 
});

How do i solve this php ajax and js issue?

1 Answers1