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
– Chitrang, Commented Jul 21, 2021 at 7: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
– ADyson, Commented Jul 21, 2021 at 7:16
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
– Chitrang, Commented Jul 21, 2021 at 7:19

Sarah Groß · Accepted Answer · 2021-07-21 07:20:16Z

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.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related