Populating data in a text box on selection of dropdown using ajax - php

Question

I am trying to fetch a row on a selection of a particular ID, now when the user selects any value of a drop-down the respective values have to come into text boxes, I am using ajax for the same,I am getting output from my PHP file But they are in array form like ("rahul", "9594233709"). When I am trying to put them in there respective fields I am not able to do it.
Here is my complete code. I am trying to fetch a row on a selection of a particular ID, now when the user selects any value of a drop-down the respective values have to come into text boxes, I am using ajax for the same,I am getting output from my PHP file But they are in array form like ("rahul", "9594233709").
When I am trying to put them in their respective fields I am not able to do it.here is my complete code. I am expecting That location has to move in the location column and mobile has to be in Mobile column, Array is coming perfectly in the front end. For example: ["9594233705", "Gorakhpur"]
<script >
$(document).ready(function(){
$('#reg_number').change(function(){
var reg_number = $(this).val();
$.ajax
({
type: "POST",
url: "details.php",
data: {post_id:reg_number},
dataType: "text",
cache: false,
success:function(data)
{
$('#u_mobile1').val(data);
$('#u_location1').val(data);
}
});
});
});
</script>
if($_POST['post_id'])
{
$id=$_POST['post_id'];
$sql="SELECT u_mobile,u_location FROM system_users WHERE u_userid=".$id;
$result = mysqli_query($con,$sql);
$data = array();
while($row = mysqli_fetch_array($result))
{
$u_mobile = $row['u_mobile'];
$u_location = $row['u_location'];
$data[0]=$u_mobile ;
$data[1]= $u_location ;
// $data[] = array('u_mobile' => $u_mobile, 'u_location' => $u_location);
} echo json_encode($data);
}
<div class="col-md-6">
<div class="form-group form-group-default required">
<label>Company Mobile Number:</label>
<input type="number" class="form-control" required="" id="u_mobile1" name="u_mobile1" value="" >
</div>
</div>
<div class="col-md-6">
<div class="form-group form-group-default required">
<label class="">Location</label>
<input type="number" class="form-control" required="" id="u_location1" name="u_location1" value="">
</select>
</div>
</div>

Answer 1

if i didn't get it wrong, you want to parse response Json data and add to inputs.
If this is the case you can use javascript JSON.parse(); function. Because you getting data as a json list.
$.ajax
({
type: "POST",
url: "details.php",
data: {post_id:reg_number},
dataType: "text",
cache: false,
success:function(data)
{
var resp = JSON.parse(data);
document.getElementById("u_mobile").value=resp.u_mobile;
document.getElementById("u_location").value=resp.u_location;
}
});