如何制作 Firebase 表单？答案

【问题标题】：How do I make a Firebase Form?如何制作 Firebase 表单？
【发布时间】：2020-08-06 23:31:13
【问题描述】：

我正在将 Firebase 用于网站页面。如何使用 Firebase 创建表单？并将数据存储在数据库中？那里似乎没有任何好的教程。我是 Firebase 的新手。

【问题讨论】：

标签： forms firebase firebase-realtime-database

【解决方案1】：

Firebase 数据库更像是数据对象的存储。因此，您只需要从表单值构建一个 JavaScript 对象并在提交时发送到 Firebase。

检查此CodePen。关注新活动部分。您将了解如何从表单值构建对象并将其发送到 Firebase。

例如，您的 html 中有一个表单：

<form id='myForm'>
  <input id='title' type='text' />
  <input id='description' type='text' />
  <input type='submit' />
</form>

在你的 JavaScript 文件中你可以这样做：

// Listen to the form submit event
$('#myForm').submit(function(evt) {

  // Target the form elements by their ids
  // And build the form object like this using jQuery: 
  var formData = {
    "title": $('#title').val(),
    "description": $('#description).val(),
  }

  evt.preventDefault(); //Prevent the default form submit action
  
  // You have formData here and can do this:
  firebase.initializeApp(config); //Initialize your firebase here passing your firebase account config object
  firebase.database().ref('/formDataTree').push( formData ); // Adds the new form data to the list under formDataTree node
})

希望对你有帮助

【讨论】：