如何制作Firebase表格? [英] How do I make a Firebase Form?

问题描述

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

I am using Firebase for a website page. How would I create a form with Firebase? And the data be stored in a database? There doesn't seem to be any good tutorials out there. I am new to Firebase.

推荐答案

Firebase数据库更像是数据对象的存储.因此，您所需要做的就是从表单值中构建一个JavaScript对象，并在提交时将其发送到Firebase.

Firebase database is more like a storage for your data objects. So all you need is build a JavaScript object from the form values and send to Firebase on submit.

选中此 CodePen .重点关注新活动"部分.您将看到如何从表单值构建对象并将其发送到Firebase.

Check this CodePen. Focus on the New Activity section. You will see how you can build objects from your form values and send to Firebase.

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

For instance, you have a form in your html:

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

在您的JavaScript文件中，您可以执行以下操作:

And in your JavaScript file you can do this:

// 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
})

希望这会有所帮助

这篇关于如何制作Firebase表格?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！