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

Question

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.

From what I see, your script code seems to miss brackets `});` at the end. Did you miss it while posting here or is it not there in your code? — Chitrang, Jul 21 '21 at 07:04
Have you done any simple debugging? Your question lacks details - just saying it doesn't work gives us nothing to go on. Remember we can't really run the code, certainly not the PHP part anyway. At the very minimum, check your console and network tools for errors and unexpected results, use the JS debugger and/or some console logging, and debug / error check the PHP too. — ADyson, Jul 21 '21 at 07:16
I'd suggest though that the SQL is potentially able to fail because of the fact you've just injected the user input query value direct into the SQL without any quoting. Firstly that's vulnerable to SQL injection and secondly if they enter any non-numeric characters it'll cause a syntax error. Urgently learn to use prepared statements and parameters please - you should have been taught this anyway when learning how to use queries with PHP. See https://stackoverflow.com/questions/60174/how-can-i-prevent-sql-injection-in-php for suitable guidance — ADyson, Jul 21 '21 at 07:18
I see at one place your using `val()` method in `var search= $(this).val();`. Have you already tried using val() method for `$('#wb_empname').html(result);`? — Chitrang, Jul 21 '21 at 07:19
Actually that's true, you need .val() to set a textbox value. — ADyson, Jul 21 '21 at 07:23

score 2 · Accepted Answer · answered Jul 21 '21 at 07:20

There are several things going on:

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!
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?
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.
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).
There's a typo in the callback property. It currently reads succes, but needs to be success ("s" missing from the end).
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.

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

1 Answers1