ajax php printing values inside divs - php

Question

I have a form where the user has to enter their reservation id and last name. If these two values match in the database then I need to return the corresponding values from the database.
So far, everything seems to work. The correct values are being retrieved from the database. I would like to show the values inside paragraphs. I am just not sure how to archive that. ValidateReservation gets called once the button is clicked.
Here is my code:
<p id='guest_full_name'></p>
<p id='unit_number'></p>
<p id='floor'></p>
<script>
function validateReservation(){
var reservation_id = document.getElementById("reservation_id").value;
var guest_last_name = document.getElementById("guest_last_name").value;
$.ajax({
type: 'POST',
url: 'test06.php',
// dataType: 'json',
data: {
'reservation_id': reservation_id,
'guest_last_name' : guest_last_name
},
success: function(json) {
console.log(json);
$('#reservation_id').val(json.reservation_id);
$('#guest_last_name').val(json.guest_last_name);
$('#guest_full_name').val(json.guest_full_name);
$('#unit_number').val(json.unit_number);
$('#floor').val(json.floor);
$('#key_sa').val(json.key_sa);
},
error: function(err) {
console.log(err);
} }); }
test06.php
<?php
$conn = mysqli_connect("","","","");
$reservation_id=$_POST['reservation_id'];
$guest_last_name=$_POST['guest_last_name'];
$stmt = $conn->prepare("SELECT reservation_id, guest_last_name, guest_full_name, unit_number, floor, key_sa FROM reservations2 INNER JOIN guest ON (reservations2.reservation_id=guest.reservation_idg) INNER JOIN unit USING (unit_id) WHERE reservation_id=? AND guest_last_name=?");
$stmt->bind_param("ss", $reservation_id, $guest_last_name);
$stmt->execute();
$stmt->bind_result($reservation_id, $guest_last_name, $guest_full_name, $unit_number, $floor, $key_sa);
if ($stmt->errno) {
die("Query failed to execute: " . $stmt->error);
}
if ($stmt->fetch()) {
echo json_encode(array("reservation_id" => $reservation_id,
"guest_last_name" => $guest_last_name,
"guest_full_name" => $guest_full_name,
"unit_number" => $unit_number,
"floor" => $floor,
"key_sa" => $key_sa));
} else {
echo "No matching rows returned.";
}
$stmt->close();
?>

Answer 1

Please use .html() instead of .val()
$('#guest_full_name').html(json.guest_full_name);
$('#unit_number').html(json.unit_number);
$('#floor').html(json.floor);
You can also use the below code without jQuery
document.getElementById('guest_full_name').innerHTML = json.guest_full_name;
document.getElementById('unit_number').innerHTML = json.unit_number;
document.getElementById('floor').innerHTML = json.floor;
UPDATE:
Convert your response into json object in success function,
var json = JSON.parse(json);