I am trying to make a contact us page on a website for a project I am doing in school. When I click the submit button I want to insert records into firebase and check the validity of the email address. I can get them both to work separately but not together.
I have tried separating them into 2 functions but I still cant get it to work. I am using onclick="insertRecord()". When I do so with the code below the validation code works but the user entries dont get pushed to Firebase. When I take out the validation part, it sends the entries no problem! Id greatly appreciate any advice. Thank you.
firebase.initializeApp(firebaseConfig);
function insertRecord(){
var name=document.getElementById("nameIn").value;
var pn=document.getElementById("phoneNumIn").value;
var email=document.getElementById("Email").value;
var date=document.getElementById("Date").value;
var choice=document.getElementById("contactby").value;
if (email.includes("@")&& email.includes(".")) {
alert("Your details have been submitted");
location.href = "contactus.html"
}
else {
alert("Invalid Email Address. Please try again");
location.reload();
}
var myDB=firebase.database().ref();
var addRecord=myDB.child('Contacts').push();
record = {
"nameIn":name,
"phoneNumIn":pn,
"Email":email,
"Date":date,
"contactby":choice
}
addRecord.set(record);
}
import { getDatabase , update,ref } from "firebase/database"; const db = getDatabase();
function insertRecord(){
var name=document.getElementById("nameIn").value;
var pn=document.getElementById("phoneNumIn").value;
var email=document.getElementById("Email").value;
var date=document.getElementById("Date").value;
var choice=document.getElementById("contactby").value;
if (email.includes("@")&& email.includes(".")) {
record = {
"nameIn":name,
"phoneNumIn":pn,
"Email":email,
"Date":date,
"contactby":choice
}
const updates = {};
updates[`/Contacts/${name}`] = record;
return firebase.database().ref().update(updates);
alert("Your details have been submitted");
location.href = "contactus.html"
}
else {
alert("Invalid Email Address. Please try again");
location.reload();
}
}
The problem is that writing to the database is asynchronous operation and your location.href = "contactus.html" is causing the current page to unload before that write operation completes.
You'll need to synchronize the two operations: waiting until the write is completed, before navigating to the new page.
function insertRecord(){
var name=document.getElementById("nameIn").value;
var pn=document.getElementById("phoneNumIn").value;
var email=document.getElementById("Email").value;
var date=document.getElementById("Date").value;
var choice=document.getElementById("contactby").value;
if (email.includes("@")&& email.includes(".")) {
var myDB=firebase.database().ref();
var addRecord=myDB.child('Contacts').push();
record = {
"nameIn":name,
"phoneNumIn":pn,
"Email":email,
"Date":date,
"contactby":choice
}
addRecord.set(record).then(() => { // ๐ wait for write to complete
alert("Your details have been submitted");
location.href = "contactus.html"; // ๐ then move to the new page
})
}
else {
alert("Invalid Email Address. Please try again");
location.reload();
}
}