I am developing an Interrail Planner for my friends and I use to plan and budget our next summer interrail trip.
I’m developing it with php and mysql (obviously with html css and js for front-end/back-end). I also have a folder inside the project with the names “Testes” so I can develop and try the pages before create the final page and respective css files.
Right now, I am testing part of the page with the personal info of each travelers (still have only the front-end for one, then is just to multiply it).
The connection file (config.php) looks like:
<?php
define('HOST', 'localhost');
define('USER', 'root');
define('PASS', '');
define('BASE', 'interrail');
$conn = new MySQLi(HOST, USER, PASS, BASE);
Part of the page test looks like:
<div class="pass-body">
<div class="primary-info">
<div id="pass-name">
<label for="name">Full Name:</label>
<input type="text" name="name" id="name" readonly>
</div>
<div id="pass-birth-date">
<label for="birth-date">Birth Date:</label>
<input type="date" name="birth-date" id="birth-date" readonly>
</div>
</div>
<div class="fiscal-info">
<div class="first-line">
<div id="pass-street">
<label for="street">Street:</label>
<input type="text" name="street" id="street" readonly>
</div>
<div id="pass-no">
<label for="street-no">No.:</label>
<input type="text" name="street-no" id="street-no" readonly>
Part of JS looks like:
<script>
// Function to fetch user data based on the selected person (button click)
function fetchUserData(personId) {
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (this.readyState === 4 && this.status === 200) {
const data = JSON.parse(this.responseText);
if (data) {
document.getElementById('name').value = data.name;
document.getElementById('birth-date').value = data.birth_date;
document.getElementById('street').value = data.street;
document.getElementById('street-no').value = data.street_no;
// Save the filled data to localStorage
localStorage.setItem('name', data.name);
localStorage.setItem('birth-date', data.birth_date);
localStorage.setItem('street', data.street);
localStorage.setItem('street-no', data.street_no);
}
}
};
xhr.open('GET', `travelersdata.php?id=${personId}`, true);
xhr.send();
}
// Function to retrieve saved data from localStorage and populate the input fields
function loadSavedData() {
const name = localStorage.getItem('name');
const birthDate = localStorage.getItem('birth-date');
const street = localStorage.getItem('street');
const streetNo = localStorage.getItem('street-no');
document.getElementById('name').value = name;
document.getElementById('birth-date').value = birthDate;
document.getElementById('street').value = street;
document.getElementById('street-no').value = streetNo;
}
// Load saved data on page load
window.addEventListener('load', function () {
// Call fetchUserData with personId=1 to populate the data for id=1
fetchUserData(1);
// Load any previously saved data from localStorage
loadSavedData();
});
</script>
However, it only populates some of the information (the birth date is not populate) and some of them is populated but as undefined.
I have changed the database columns names and checked and rechecked all the code but nothing has changed.