TypeError: Eigenschaften von Null können beim Speichern von Daten in der PHP-Web-App nicht gelesen werden ⇐ JavaScript

[Guest]

Ich arbeite an einer PHP-Webanwendung, in der Benutzer Daten eingeben, Felder validieren, Bilder in der Vorschau anzeigen und die Daten dann in MySQL speichern. Beim Absenden des Formulars erhalte ich den Fehler:
TypeError: Eigenschaften von Null können nicht gelesen werden (Wert wird gelesen)
Das passiert, wenn ich es versuche um auf Formularfeldwerte zuzugreifen. Wie kann ich dieses Problem beheben?

Code: Select all

function populateReviewSection() {
const reviewContent = document.getElementById('reviewContent');
reviewContent.innerHTML = ''; // Clear previous content

// Helper function to format dates (if applicable)
const formatDate = (dateStr) => {
const date = new Date(dateStr);
if (isNaN(date.getTime())) return 'Not provided';
return date.toLocaleDateString(); // You can customize this format as needed
};

// Retrieve form data
const firstname = document.getElementById('firstname').value;
const surname = document.getElementById('surname').value;
const email = document.getElementById('email').value;
const dob = formatDate(document.getElementById('dob').value); // Format DOB
const gender = document.querySelector('input[name="gender"]:checked')?.value || 'Not selected';
const ridersImagePreview = document.getElementById('ridersImagePreview').src;
const ridersImageName = document.getElementById('ridersImageName').textContent || 'No image selected';

// Retrieve fields for GPS address, employment status, and nationality
const gpsAddress = document.getElementById('riders_gpsAddress').value || 'Not provided';
const employmentStatus = document.getElementById('employment_status').value || 'Not selected';
const nationality = document.getElementById('nationality').value || 'Not selected';
const homeTown = document.getElementById('home_town').value || 'Not provided';
const phoneNumber = document.getElementById('phone_number').value || 'Not provided';
const address = document.getElementById('address').value || 'Not provided';
const stationId = document.getElementById('station_id').value || 'Not selected';

// Step 2: Retrieve form data from Step 2
const idCardType = document.getElementById('id_card_type').value || 'Not selected';
const idCardNumber = document.getElementById('id_card_number').value || 'Not provided';
const idCardExpiry = formatDate(document.getElementById('id_card_expiry').value); // Format ID card expiry
const idCardImagePreview = document.getElementById('idCardImagePreview').src;
const idCardBackImagePreview = document.getElementById('idCardBackImagePreview').src;

const isRiderHavingLicense = document.getElementById('isRiderHavingLicense').value || 'Not selected';
const licenseNumber = document.getElementById('license_number').value || 'Not provided';
const licenseExpiryDate = formatDate(document.getElementById('license_expiry_date').value); // Format license expiry
const licenseImagePreview = document.getElementById('licenseImagePreview').src;
const licenseBackImagePreview = document.getElementById('licenseBackImagePreview').src;

// Get values for the radio button groups
const yearsAsRider = document.querySelector('input[name="years_as_rider"]:checked')?.value || 'Not selected';
const ownMotorbike = document.querySelector('input[name="own_motorbike"]:checked')?.value || 'Not selected';
const workingForPay = document.querySelector('input[name="working_for_pay"]:checked')?.value || 'Not selected';
const business_model = document.getElementById('business_model').value || 'Not provided';
const shareBike = document.querySelector('input[name="share_bike"]:checked')?.value || 'Not selected';

// Populate the reviewContent div with the collected data
reviewContent.innerHTML = `



[b]Rider's Image[/b]
[i]
[b]Image Name:[/b]  ${ridersImageName}

[b]Personal Information[/b]


First Name
${firstname}


Surname
${surname}


Email
${email}


Date of Birth
${dob}


Gender
${gender}



[b]Rider's Details[/b]


GPS Address
${gpsAddress}


Employment Status
${employmentStatus}


Nationality
${nationality}


Home Town
${homeTown}


Phone Number
${phoneNumber}


Address
${address}


Station
${stationId}



[b]ID Card Information[/b]


ID Card Type
${idCardType}


ID Card Number
${idCardNumber}


ID Card Expiry
${idCardExpiry}


ID Card Front

[img]${idCardImagePreview}[/img]



ID Card Back

[img]${idCardBackImagePreview}[/img]




[b]License Information[/b]


Has a License
${isRiderHavingLicense}

${isRiderHavingLicense === 'Yes' ? `

License Number
${licenseNumber}


License Expiry
${licenseExpiryDate}


License Front

[img]${licenseImagePreview}[/img]



License Back

[img]${licenseBackImagePreview}[/img]


` : ''}


[b]Rider's Experience[/b]


Number of Years as a Rider
${yearsAsRider} years


Do you own the motorbike?
${ownMotorbike}


Are you working for work and pay?
${workingForPay}


Your business model if not work and pay
${business_model}


Do you share the bike with another rider?
${shareBike}



`;
}

// Add a submit button to your HTML in the review step
document.querySelector('#submit-form').addEventListener('click', function(e) {
e.preventDefault();

// Show SweetAlert2 confirmation dialog
Swal.fire({
title: 'Are you sure?',
text: "You want to submit this rider information?",
icon: 'question',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, submit it!'
}).then((result) => {
if (result.isConfirmed) {
// Disable the submit button to prevent double submission
this.disabled = true;

// Show loading state
$(this).html('[/i]  Submitting...');

// Call the save function
saveRiderData();
}
});
});

// Update the saveRiderData function to properly collect all form data
function saveRiderData() {
// Create a data object instead of FormData
const data = {
firstname: document.getElementById('firstname').value,
surname: document.getElementById('surname').value,
email: document.getElementById('email').value,
dob: document.getElementById('dob').value,
gender: document.querySelector('input[name="gender"]:checked').value,
gpsAddress: document.getElementById('riders_gpsAddress').value,
employmentStatus: document.getElementById('employmentStatus').value,
nationality: document.getElementById('nationality').value,
homeTown: document.getElementById('home_town').value,
phoneNumber: document.getElementById('phone_number').value,
address: document.getElementById('address').value,
stationId: document.getElementById('station_id').value
};

// Handle image files - convert to base64
const promises = [];

// Function to convert file to base64
const fileToBase64 = (file) => {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result);
reader.onerror = error => reject(error);
});
};

// Add riders image
const ridersImage = document.getElementById('ridersImage').files[0];
if (ridersImage) {
promises.push(
fileToBase64(ridersImage).then(base64 => {
data.ridersImagePreview = base64;
})
);
}

// Add ID card images
const idCardImage = document.getElementById('id_card_image').files[0];
if (idCardImage) {
promises.push(
fileToBase64(idCardImage).then(base64 => {
data.idCardImagePreview = base64;
})
);
}

const idCardBackImage = document.getElementById('id_card_back_image').files[0];
if (idCardBackImage) {
promises.push(
fileToBase64(idCardBackImage).then(base64 => {
data.idCardBackImagePreview = base64;
})
);
}

// License information
data.isRiderHavingLicense = document.getElementById('isRiderHavingLicense').value;
if (data.isRiderHavingLicense === 'Yes') {
data.licenseNumber = document.getElementById('license_number').value;
data.licenseExpiryDate = document.getElementById('license_expiry_date').value;

const licenseImage = document.getElementById('license_image').files[0];
if (licenseImage) {
promises.push(
fileToBase64(licenseImage).then(base64 => {
data.licenseImagePreview = base64;
})
);
}

const licenseBackImage = document.getElementById('license_back_image').files[0];
if (licenseBackImage) {
promises.push(
fileToBase64(licenseBackImage).then(base64 =>  {
data.licenseBackImagePreview = base64;
})
);
}
}

// Experience information
data.yearsAsRider = document.querySelector('input[name="years_as_rider"]:checked').value;
data.ownMotorbike = document.querySelector('input[name="own_motorbike"]:checked').value;
data.workingForPay = document.querySelector('input[name="working_for_pay"]:checked').value;
data.businessModel = document.getElementById('business_model').value;
data.shareBike = document.querySelector('input[name="share_bike"]:checked').value;

// Wait for all file conversions to complete
Promise.all(promises)
.then(() => {
// Send the data using fetch
return fetch('../API/save_rider_data.php', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
});
})
.then(response => response.json())
.then(data => {
console.log('Response data:', data);
if (data.status === 'success') {
Swal.fire({
icon: 'success',
title: 'Success!',
text: 'Rider information saved successfully!',
timer: 1500
}).then(() => {
window.location.href = 'riders_list.php';
});
} else {
throw new Error(data.message || 'Failed to save rider information');
}
})
.catch(error => {
console.error('Error:', error);
Swal.fire({
icon: 'error',
title: 'Error',
text: error.message
});
document.querySelector('#submit-form').disabled = false;
document.querySelector('#submit-form').innerHTML = 'Submit';
});
}