一键点击推送到 firebase 和验证电子邮件时出现问题

Question

我正在尝试为我在学校做的项目在网站上创建一个联系我们页面。当我单击提交按钮时，我想将记录插入到 firebase 和检查电子邮件地址的有效性。我可以让他们分开工作，但不能一起工作。

我试过将它们分成两个函数，但我仍然无法让它工作。我正在使用 onclick="insertRecord()"。当我使用下面的代码执行此操作时，验证代码有效但用户条目不会被推送到 Firebase。当我取出验证部分时，它发送条目没问题！我非常感谢任何建议。谢谢。

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

      }

Answer 1

从“firebase/database”导入{getDatabase，更新，ref}； const db = getDatabase();

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

  }

Answer 2

问题是写入数据库是异步操作，您的 location.href = "contactus.html" 导致当前页面在写入操作完成之前卸载。

您需要同步这两个操作：等待写入完成，然后再导航到新页面。

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

一键点击推送到 firebase 和验证电子邮件时出现问题

Problem pushing to firebase and validating email in one button click

javascript

firebase

firebase-realtime-database