Get data from database and PHP using Ajax - php

Question

I want to send data from text input and set result (from database) into another inputs using Ajax
I've tried to parse result into JSON using json_encode(), for some reason it didn't work and as solution I created a div in the result PHP page which with it I get the div with content
index.php
<div class="form-group col-4">
<label for=""> Code:<span style="color:red;">*</span></label>
<input type="text" class="form-control form-control-sm" id="codecli" name="codecli" onkeyup="showinfoclient()" required>
</div>
<div class="form-group col-8 " id="mess">
</div>
</div>
<div class="minfoclient">
<div class="form-row">
<div class="form-group col-6">
<label for=""> Lastname:<span style="color:red;">*</span></label>
<input type="text" class="form-control form-control-sm" id="lastname" name="lastname" value="" required>
</div>
<div class="form-group col-6">
<label for=""> Firstname:<span style="color:red;">*</span></label>
<input type="text" class="form-control form-control-sm" id="firstname" name="firstname" value="" required>
</div>
</div>
client.php
if ($_REQUEST['idcli']) {
$idcli = strip_tags($_POST['idcli']);
$iduser = $_SESSION['user_id'];
$clients = $conn->query("SELECT * FROM `client` WHERE
`Current_user`=$iduser AND `id_client`='$idcli'");
while($client = $clients->fetch_assoc()){
?>
<div class="minfoclient">
<div class="form-row">
<div class="form-group col-6">
<label for=""> Lastname:<span style="color:red;">*</span></label>
<input type="text" id="nom" class="form-control form-control-sm namm" name="lastname" value="<?=$client['lastname'];?>">
</div>
<div class="form-group col-6">
<label for=""> Firstname:<span style="color:red;">*</span></label>
<input type="text" id="prenom" class="form-control form-control-sm" name="firstname" value="<?=$client['firstname'];?>">
</div>
</div> ...
this code worked but not as expected because it blocks other tasks
function showeinfoclient(){
var iDClient = $('#codecli').val();
if (iDClient) {
$.ajax({
type:'POST',
url:'client.php',
data:'idcli='+iDClient,
success:function(data){
$('.minfoclient').html(data);
}
});
}
}
as solution I hope you provide a simple code (AJAX, JSON, and PHP)

Answer 1

In client.php
$response=array();
while($client = $clients->fetch_assoc()){
$response[]=$client;
}
echo json_encode($response);
After that inside ajax response you have to make for loop for each the client info create input elements.
ajax response:-
success:function(data){
var clients=$.parsJSON(data);
var htmlData="";
if(client.length>0){
for(i=0;i<client.length;i++){
htmlData += "<input type='text' name='firstname' value='"+client[i].firstname+"'><br>";
htmlData += "<input type='text' name='lastname' value='"+client[i].lastname+"'><br>";
}
$('.minfoclient').html(htmldata);
}
}

Answer 2

please update JS code and PHP code.
JS Code :
function showinfoclient(){
var iDClient = $('#codecli').val();
if (iDClient) {
$.ajax({
type:'POST',
url:'client.php',
data:JSON.stringify(iDClient),
dataType:'json',
})
.done(function( json ) {
$('#lastname').val(json.lastname);
$('#firstname').val(json.firstname);
})
.fail(function( xhr, status, errorThrown ) {
alert( "Sorry, there was a problem!" );
console.log( "Error: " + errorThrown );
console.log( "Status: " + status );
console.dir( xhr );
});
}
}
PHP Code (client.php):
$input = urldecode(file_get_contents('php://input'));
$iDClient = json_decode($input,true);
// code to fetch firstname and lastname from database
$client = array('firstname' => 'John', 'lastname' => 'Doe'); // raw data
echo json_encode($client);