document.addEventListener("DOMContentLoaded", function() {
// Get the form by its ID (replace 'freeSamplingKit' with your form's ID)
const form = document.getElementById('freeSamplingKit');
// If the form exists, proceed with the logic, otherwise ignore
if (form) {
const submitButton = form.querySelector('.submit-btn');
// Add event listener to handle the form submission manually
submitButton.addEventListener('click', function(event) {
event.preventDefault(); // Prevent the default form submission
// Show loading overlay
const loadingOverlay = document.getElementById('loading-overlay');
loadingOverlay.style.display = 'flex'; // Show the overlay
// Get form values
const fullName = document.getElementById('full-name').value.trim();
const mobile = document.getElementById('mobile').value.trim();
const email = document.getElementById('email').value.trim();
const address = document.getElementById('address').value.trim();
const deliveryMethod = document.getElementById('delivery-method').value;
// Full Name Validation (Must contain a first and last name)
if (!fullName || fullName.split(' ').length < 2) {
alert("Please enter your full name (first and last name).");
loadingOverlay.style.display = 'none'; // Hide the overlay if validation fails
return;
}
// Split full name into first name and last name
const [firstName, ...lastNameParts] = fullName.split(' ');
const lastName = lastNameParts.join(' ');
// Mobile validation (allow +601 or 601, but submit without +6)
const mobileRegex = /^(?:\+?6?01\d{8,9})$/; // Updated to allow both +601 and 601
if (!mobileRegex.test(mobile)) {
alert("Please enter a valid Malaysian phone number.");
loadingOverlay.style.display = 'none'; // Hide the overlay if validation fails
return;
}
// Normalize mobile number to remove '+6' or '6' prefix and ensure proper format
const normalizedMobile = mobile.replace(/^(\+?6?)(01\d{8,9})$/, '0$2');
// Email validation (simple email pattern)
const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
if (!emailRegex.test(email)) {
alert("Please enter a valid email address.");
loadingOverlay.style.display = 'none'; // Hide the overlay if validation fails
return;
}
// Validation for required fields
if (!mobile || !email || !deliveryMethod) {
alert("All required fields must be filled!");
loadingOverlay.style.display = 'none'; // Hide the overlay if validation fails
return;
}
// Prepare the data to send to Google Sheets
const formData = new FormData();
formData.append('first-name', firstName);
formData.append('last-name', lastName);
formData.append('mobile', normalizedMobile);
formData.append('email', email);
formData.append('address', address);
formData.append('delivery-method', deliveryMethod);
// Send data to Google Apps Script (Google Sheets)
fetch('https://script.google.com/macros/s/AKfycbwlaKb7lpu0JOkExBNrDf0H7fkFd1tSQdMs-Qnm0wc5Q_zamHIhO1FihdOZXzWyE4PrWA/exec', {
method: 'POST',
body: formData
})
.then(response => {
if (response.ok) {
alert("Your form has been submitted successfully!");
form.reset(); // Clear the form after submission
} else {
alert("There was an error submitting the form. Please try again.");
}
loadingOverlay.style.display = 'none'; // Hide the overlay after submission
})
.catch(error => {
console.error('Error:', error);
alert("There was an error submitting the form. Please try again.");
loadingOverlay.style.display = 'none'; // Hide the overlay if there was an error
});
});
}
});
