Problem pushing to firebase and validating email in one button click-CodePudding

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);

      }

CodePudding user response：

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();
    }  
     

  }

CodePudding user response：

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(() => { //