javascript - Firebase 实时数据库不响应 HTML 表单联系人提交
问题描述
因此,我是 firebase 和 tailwind 的新手,但我做了很多工作,创建了一个登录页面,但我添加的联系人和电子邮件更新表格无法正常工作。数据库仅采用电子邮件更新部分并忽略数据库中的联系人
没有错误或任何东西。当我输入联系人并按提交时,数据会转到电子邮件更新部分,然后就中断了!!!如果我删除电子邮件更新部分,联系人工作正常! 在此处输入图像描述
那是数据库!
<!-- 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, lastname, company, email, phone, 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!
**请任何我什至不明白发生了什么的人**
解决方案
推荐阅读
- php - php 变量随处可用
- php - 生成具有关系的种子数据
- r - Linear interpolation for missing data in R
- java - Java:双浮点类型转换为更大的值提供“无穷大”
- react-native - 在 React Native Apps 之间交换数据
- android - android - okhttp - 如何信任过期的 SSL 证书
- plugins - Get clicked Tile details in FLP Plugin
- javascript - 传单:开/关层的引导切换输入无法正常工作
- python - Generate random float number between [0,1], not fixed step but step must be larger than 0.05 in Python?
- javascript - Run method when enter is pressed