Firebase实时数据库不响应HTML表单联系人提交

问题描述

因此，我刚接触Firebase和顺风车，但是我做了很多工作，却制作了一个登录页面，但是我添加的“联系方式”和“电子邮件更新”表格却无法正常工作。数据库仅接受“电子邮件更新”部分，而忽略数据库中的“联系人”

没有错误或任何东西。 当我放入联系人并按提交时，数据将转到“电子邮件更新”部分，并且会中断！！！ 如果我删除电子邮件更新部分，则联系方式会正常工作！ enter image description here

那就是数据库！

<!-- Contacts -->
      <section id="Contacts" class="text-shark-100 bg-shark-500 body-font relative">
        <div class="container px-5 pt-24 pb-15 mx-auto">
          <div class="flex flex-col text-center w-full mb-12">
            <h1 class="sm:text-3xl text-2xl font-medium title-font mb-4 text-white">Contact Us</h1>
            <p class="lg:w-2/3 mx-auto leading-relaxed text-base">Have any Feedbacks & Questions,Just Go Ahead!</p>
            <p class="lg:w-2/3 mx-auto leading-relaxed text-base">Also Get Email Updates.</p>
          </div>
          <div class="lg:w-1/2 md:w-2/3 mx-auto">
            <form class="flex flex-wrap -m-2" id="Contact">
              <div class="p-2 w-1/2">
                <input class="w-full bg-shark-400 rounded border border-shark-300 text-white focus:outline-none focus:border-red-500 text-base px-4 py-2" placeholder="First Name" id="FirstName" type="text" required>
              </div>
              <div class="p-2 w-1/2">
                <input class="w-full bg-shark-400 rounded border border-shark-300 text-white focus:outline-none focus:border-red-500 text-base px-4 py-2" placeholder="Last Name" id="LastName" type="text" required>
              </div>
              <div class="p-2 w-full">
                <input class="w-full bg-shark-400 rounded border border-shark-300 text-white focus:outline-none focus:border-red-500 text-base px-4 py-2" placeholder="Company" id="Company" type="Text">
              </div>
              <div class="p-2 w-full">
                <input class="w-full bg-shark-400 rounded border border-shark-300 text-white focus:outline-none focus:border-red-500 text-base px-4 py-2" placeholder="Email" id="Email" type="email" required>
              </div>
              <div class="p-2 w-full">
                <input class="w-full bg-shark-400 rounded border border-shark-300 text-white focus:outline-none focus:border-red-500 text-base px-4 py-2" placeholder="Phone Number" id="PhoneNumber" type="tel">
              </div>
              <div class="p-2 w-full">
                <textarea class="w-full bg-shark-400 rounded border border-shark-300 text-white focus:outline-none h-48 focus:border-red-500 text-base px-4 py-2 resize-none block" placeholder="Message" id="Message" required></textarea>
              </div>
              <div class="p-2 w-full">
                <button class="flex mx-auto text-white bg-red-500 border-0 py-2 px-8 focus:outline-none hover:bg-red-600 hover:shadow-2xl rounded text-lg" type="submit">Let's Talk</button>
              </div>
              <div class="p-2 w-full pt-8 mt-8 border-t border-shark-300">
              </div>
            </form>
          </div>
        </div>
      </section>
      <!-- News -->
      <section id="News" class="text-shark-100 bg-shark-500 body-font">
        <div class="container px-5 pt-15 pb-24 mx-auto">
          <div class="flex flex-col text-center w-full mb-12">
            <h1 class="sm:text-3xl text-2xl font-medium title-font mb-4 text-white">Get Early Access</h1>
            <p class="lg:w-2/3 mx-auto leading-relaxed text-base">Subscribe to our emails & get notified about early updates.</p>
          </div>
          <form id="Subscribe" class="flex lg:w-2/3 w-full sm:flex-row flex-col mx-auto px-8 sm:px-0">
            <input class="flex-grow w-full bg-shark-400 rounded border border-shark-300 text-white focus:outline-none focus:border-red-500 text-base px-4 py-2 mr-4 mb-4 sm:mb-0" placeholder="Full Name" type="text" id="Name" required>
            <input class="flex-grow w-full bg-shark-400 rounded border border-shark-300 text-white focus:outline-none focus:border-red-500 text-base px-4 py-2 mr-4 mb-4 sm:mb-0" placeholder="Email" type="email" id="EmailUpdates" required>
            <button class="text-white bg-red-500 border-0 py-2 px-8 focus:outline-none hover:bg-red-600 hover:shadow-2xl rounded text-lg" type="submit">Subscribe</button>
          </form>
        </div>
      </section>

这是页面的HTML！

// Your web app's Firebase configuration
var firebaseConfig = {
  apiKey: "xxxx",authDomain: "xxxx",databaseURL: "xxxx",projectId: "xxxx",storageBucket: "xxxx",messagingSenderId: "xxxx",appId: "xxxx",measurementId: "xxxx"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();

// Reference messages collection
var contactRef = firebase.database().ref('Contact');

// Listen for a submit

document.getElementById('Contact').addEventListener('submit',submitForm);

// Submit form
function submitForm(e){
  e.preventDefault();


  // Get values
  var firstname = getInputVal('FirstName');
  var lastname = getInputVal('LastName');
  var company = getInputVal('Company');
  var email = getInputVal('Email');
  var phone = getInputVal('PhoneNumber');
  var message = getInputVal('Message');

  // Save Contact
  saveMessage(firstname,lastname,company,email,phone,message);

  // Clear form
  document.getElementById('Contact').reset();

}

// Function to get get form values
function getInputVal(id){
  return document.getElementById(id).value;
}

// Save message to firebase
function saveMessage(firstname,message){
  var newContactRef = contactRef.push();
  newContactRef.set({
    firstname: firstname,lastname: lastname,company:company,email:email,phone:phone,message:message
  });
}

// Reference messages collection
var emailupdatesRef = firebase.database().ref('EmailUpdates');
  
// Listen for a submit
  
document.getElementById('Subscribe').addEventListener('submit',submitForm);
  
// Submit form
function submitForm(e){
  e.preventDefault();

  // Get values
  var name = getInputVal('Name');
  var email = getInputVal('EmailUpdates');
  
  // Save Email Updates
  saveMessage(name,email);

  // Clear form
  document.getElementById('Subscribe').reset();
}

// Function to get form values
function getInputVal(id){
    return document.getElementById(id).value;
  }

// Save message to firebase
function saveMessage(name,email){
    var newEmailUpdatesRef = emailupdatesRef.push();
    newEmailUpdatesRef.set({
      name: name,email:email
    });
  }

这是Javascript！

**请问我什至不知道发生了什么事的人**

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）