Sending request from JQuery/ajax to php mysql, and putting that data back into a read only HTML input textbox element

I want to change the readonly value of an HTML textbox from the value I got in my jquery/ajax method after an admin , inputs the employee id number and presses enter. But I cant seem to get it to work. What am I doing wrong?

this is the HTML

 <td class="text2"><div align="right" >User:&nbsp;&nbsp;</div></td>
        <td class="style4" align="left">
          <input type="text" name="wb_user"  id="wb_name" size="18" maxlength="50" value="<?php echo $_POST["wb_user"];?>" class="form-control" placeholder="Input Employee ID and press ENTER" />
        </span></td>
        <td class="text2"><div align="right" class="style4">IP/Network Address:&nbsp;&nbsp;</div></td>
        <td align="left" class="style4">
          <input type="text" name="wb_ip"  size="15" maxlength="25" class="form-control" />
        </span></td>
      </tr>
      
      <tr>
    <td class="text2"><div align="right" class="style4">Employee Name:&nbsp;&nbsp;</div></td>
        <td class="style4" align="left">
          <input type="text" name="wb_emname"  id="wb_empname" size="20" maxlength="50" class="form-control" readonly />
        </span></td>

This is the script.

$(document).ready(function() {

  load_data();
  function load_data(query){
  
    $.ajax ({
      url: "fetch.php",
      method: "POST",
      data: {query:query},
      succes: function (result)
      {
        $('#wb_empname').html(result);
      },
      error: function() {
        alert('There was some error performing the AJAX call!');
      }
    });

  }

    $("#wb_name").on('keyup',function(event) {
    if (event.key === "Enter") {
        // Do something
        
        var search= $(this).val();
        console.log(search);
       if(search !=''){
        load_data(search);
       }
    }
});

This is the fetch.php:

<?php

if(isset($_POST["query"])){
  $q= $_POST["query"];

 
 //$branchcodeID= $_POST['wb_branch'];
   try {
         $dbh = new PDO('mysql:host=localhost;dbname=myhris43_test', 'root', 'bvgtxpkrf7');
        foreach($dbh->query("SELECT id_emp from tblemployee where id_emp=$q") as $row) {
            
           $result= $row['id_emp'];
           
         }
     $dbh = null;

    } catch (PDOException $e) {
      print "Error!: " . $e->getMessage() . "<br/>";
       die();
     }

}

Please help me, Im new to jQuery and ajax.

Answer

There are several things going on:

1. Never ever put user input (even from an admin interface) directly into a database query. This will open up the doors for SQL injection – use PDO::prepare to prepare the statements before sending the query to the database!
2. You’re selecting the column id_emp from the table, while already querying for the value of id_emp that was entered. I think you’ll want to get the column containing the name according to the id_emp?
3. When querying for an ID, you shouldn’t get back more than one row (assuming the id is the (primary) key of the table), so you probably don’t need the loop at all. Anyways, you’re overwriting the $result variable with every iteration, which is not what you’d want to do when expecting multiple rows to be returned.
4. You never return/output your $result. Best way would be to use JSON as the response (setting the corret Content-Type header application/json and using json_encode() with an object holding the response data), but plaintext will do for now. Simply use die($result).
5. There’s a typo in the callback property. It currently reads succes, but needs to be success (“s” missing from the end).
6. html() is not the correct method to set the value of an input element. You don’t want to set its inner HTML content (because it has none), but its value. So use $('#wb_empname').val(result); instead.

With all that fixed, your code works as intended.