Guest
TypeError: Eigenschaften von Null können beim Speichern von Daten in der PHP-Web-App nicht gelesen werden
Post
by Guest » 11 Jan 2025, 09:37
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';
});
}
1736584639
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]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'; }); }