I'm currently designing a website for booking reservations through an HTML form, with data submission to firestore. Upon submission, a confirmation email is sent to the customer. Below is the code snippet I am using to achieve this:
var firestore = firebase.firestore();
var messagesRef = firestore.collection("bookingData");
//listen for submit
document.getElementById("bookingForm").addEventListener("submit", submitForm);
function submitForm(e) {
e.preventDefault();
//get values
var email = getInputVal("email");
var packageFields = getInputVal("packageFields");
var name = getInputVal("name");
var phone = getInputVal("phone");
var date = getInputVal("date");
var [persons] = getInputVal("persons");
saveMessage(email, packageFields, name, phone, date, persons);
sendEmail(email, packageFields, name, date, persons);
//show alert
}
// function to get form values
function getInputVal(id) {
return document.getElementById(id).value;
}
//save messages
function saveMessage(email, packageFields, name, phone, date, persons) {
messagesRef
.add({
email: email,
packageFields: packageFields,
name: name,
phone: phone,
date: date,
persons: persons,
})
.then(function (docRef) {
console.log("Document written with ID: ", docRef.id);
console.log(email);
})
.catch(function (error) {
console.error("Error adding document: ", error);
});
}
function sendEmail(packageFields, name, date, persons) {
Email.send({
Host: "smtp.gmail.com",
Username: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4733352e37373e26232e3122693022256926373707202a262e2b6924282a">[email protected]</a>",
Password: "xxxxxxxxxxxxxxx",
To: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f28187909a9d969b828d929caeb38efc8cfcecdcbec9994999396ce838f8dcfa68684">[email protected]</a>",
From: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fc888e958c8c859d98959aa4dd90949fb69697929884de939f9d">[email protected]</a>",
Subject: "Sending Email using Javascript",
Body: `Your package of ${packageFields} for ${name} with total ${persons} persons (incl. ${name}) dated ${date} has been provisonalised. Your seat will be confirmed once you complete the payment of the Security Deposit`,
}).then(function (message) {
alert("Mail sent successfully");
});
}
Everything is functioning correctly, but the To: field in the email is always fixed. Is there a way to dynamically change the To: value based on the inputted email address in the form?
Appreciate any assistance in advance.