Connect Registration Form To Firebase - Part 2

In the first part of this tutorial, we worked on only the user interface of the registration form. In this part we will complete the tutorial by :

• Handling Form Submission With Javascript

• Connecting Firebase Realtime Database to the Registration Form

Handle Form Submission With Javascript

To do this, we are going to listen for the submit event and then get the values of the document object model(DOM). This is done through the javascript event listener.

From the code above, we got the Id of the form and also the values of the form details using Query-Selectors. With this, we can display the values of the form from the console. All this is done inside the formSubmit function

The next thing we are going to do is to show the alert message and then hide it after some seconds. Remember in our Html in the first part of the tutorial, we have a div with the class of alert which was set to display as none in our Css.

In our app.js file, we will set the display to block and then hide the alert message after seven seconds. The code is going to be inside the formSubmit function:

With this we have an alert message that lets us know when the form has been submitted.

The final thing we are going to do before connecting the form to firebase is to clear the form fields after submission. This is pretty easy, all we have to do is get the Id of the form itself and then reset it. Remember this will also be declared inside the formSubmit function:

Now our form gets cleared after the submit button has been clicked.

It is now time to get the data inside the form by using firebase.

Connect Firebase Realtime Database to the Registration Form

Here we need to initialise firebase. We can do this by going to the firebase website and creating a new firebase project for free. This article explains in good details on how to create a new firebase project.

Once this is done. You will get the option of selecting between the Realtime Database and the Cloud Firestore. In this tutorial, we will make use of the Real-time data base.

In your project you will be asked to choose between three platforms to get started (Ios, android and Web app), select the web app and there you will see a code similar to this:

Copy and paste it inside your javascript file. Be carefull not to show anyone your api-key or push your api-key to a public repository on github.

The final thing we need to copy is the script tag.

This script tag will be inside our html file, but it must be above the script tag we used to link our Html and Javascript. If it's not placed above it our code will not work.

Now we can connect to our database on firebase, to do this we need to reference a collection.

We can create the collection directly from our app.js and also giving it a name:

In the code above, we named our database collection register

Up next we need to send the data from our form to the collection we created. To do that, we create a new function called sendMessage :

So what we did was to call all the data in our form fields and then we pushed on to it with the formMessage variable we used to declare our collection. Then finally, we called a set function that takes in all the data we will save to our firebase database.

So the last thing we need to do is to call all our data in the sendMessage function inside the formSubmit function, so the data gets posted to our backend :

So that is it. Our registration form can get data and save it to our database. This is really good for small projects if you don't want to use any kind of relational database that requires you to create tables and all.

Our final code in our app.js should look like this:

Our database should also look like this:

Note: If you discover your data is not sent to your database, check your console. If you see any error saying permission denied, then you have to go back to your settings in firebase. Click on the database section in your side bar, in there you will see Rules. Once you click on Rules, set the read and write to true:

That should solve your permission denied error.

So we have a perfectly working registration form.

To get more free content on web development, subscribe to my newsletter:
here