Firebase html 表单答案

【问题标题】：Firebase html formFirebase html 表单
【发布时间】：2019-09-23 22:00:42
【问题描述】：

我正在尝试使用 Firebase 作为后端来构建一个表单。

这是代码：

HTML

<form class="form-inline">
<input type="email" class="form-control" id="inputEmail" placeholder="Enter email address...">
<button type="submit" class="btn">Subscribe</button>
</form>

<script src="https://www.gstatic.com/firebasejs/6.6.2/firebase-app.js"></script>

'use strict';

//grab a form
const form = document.querySelector('.form-inline');

//grab an input
const inputEmail = form.querySelector('#inputEmail');


//config your firebase push
const config = {
apiKey: "...",
authDomain: "...",
databaseURL: "...",
projectId: "...",
storageBucket: "...",
messagingSenderId: "...",
appId: "..."
};


//create a functions to push
function firebasePush(input) {


//prevents from braking
if (!firebase.apps.length) {
firebase.initializeApp(config);
}

//push itself
var mailsRef = firebase.database().ref('emails').push().set(
{
mail: input.value
}
);

}

//push on form submit
if (form) {
form.addEventListener('submit', function (evt) {
evt.preventDefault();
firebasePush(inputEmail);

//shows alert if everything went well.
return alert('Data Successfully Sent to Realtime Database');
})
}

但它不起作用。我在控制台上收到以下错误：

TypeError: firebase.database is not a function

指的是：

var mailsRef = firebase.database().ref('emails').push().set

怎么了？

谢谢。

【问题讨论】：

标签： javascript html firebase firebase-realtime-database

【解决方案1】：

由于您使用的是实时数据库，因此在您的代码中当前的<script> 下，添加以下内容：

<script src="https://www.gstatic.com/firebasejs/6.6.1/firebase-database.js"></script>

能够在您的网站中使用数据库。

【讨论】：