How to connect an HTML registration form to Firebase

Firebase is a mobile and web development platform that provides programmers with a variety of tools to help them develop quality applications. Firebase has two database solutions: Cloud Firestore and the Realtime Database. To store the data in our form, we will make use of the Realtime Database. Here, data is stored in JSON format and synchronized in real time to every connected client.

In the Answer How to create a registration form with HTML, we worked on only the user interface of the registration form. In this Answer, we will complete the process of this project by:

• Handling Form Submission with Javascript

• Connecting Realtime Database to the Registration Form using Firebase.

In this project, we will make use of the Firebase 9 modular Web SDK.

Form submission with javascript

To handle the form submission, 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.

Example

Explanation

• Line 58: We created the start script and gave it an attribute type of module. This allows us to make use of the import statement in JavaScript.

• Line 60: We used the getElementById() method which helps us to access the values of the elements of the registration form.

• Line 61: The addEventListener() helps us to attach a submit event to the form and send the values to the backend service.

• Line 64: We created a function called formSubmit(e). Within this function, we are able to get the values of each field in our HTML form by using the querySelector method in javascript.

Connecting the real-time database

Here we need to integrate firebase into our project. We can do this by going to the firebase console website and creating a new firebase project. Once this is done, within the firebase console dashboard we can select the Realtime Database and create a new database as highlighted in the image below:

We get presented with a couple of modals. The first modal requires us to select a location where the server is hosted. Select a location close to your region, while the second modal asks us to determine the mode we want. We will proceed to select test mode.

Next, we need to get the firebase configuration settings. To do this, we click on the project overview settings cog and select the web icon as highlighted in the image below:

We can now grab the firebase config object and paste it into our code while also initializing firebase 9.

Example

Explanation

• Line 59: We import the initializeApp module from Firebase 9.

• Line 61: We paste the firebase configuration object from the firebase dashboard.

• Line 71: Here we initialized firebase inside of our project making it possible to make use of the firebase methods to submit data to the database.

Next, we must import the firebase methods required to save data from the registration form into the database.

Example

Explanation

• Line 75: We import getDatabase, ref, set. The getDatabase module helps us to read and write to the database, while the ref and set module helps to save the data from our form to a specific reference.

The final step in our implementation involves creating the function that submits the data to the firebase database.

Example

Explanation

• Line 99: We created a function called sendMessage(name, email, password, bio, job, interest), which takes in all the values of our form as an argument.

• Line 100: Here, we created a variable called database which helps to hold the reference for our getDatabase() module.

• Line 102: We call the set and ref modules. The ref module takes in 4 parameters. The first parameter is the database reference. The second parameter is the name of the database folder we want to write to. The third parameter is the ID of each data we intend to save into the database. We used the Math method in JavaScript to generate random numbers to represent the ID of each data. The final parameter takes in an object that contains the values of the registration form. The result from the database then returns a promise.

• Line 111: We display a successful message if the response of the database is successful, by making use of the querySelector method to grab the alert class in our HTML and set the display to block when the form submission is successful.

• Line 113: To make the alert message disappear, we make use of the setTimeout() method, which we set to execute after 7 seconds. We do this within this method by setting the display to none.

• Line 116: Here, we used the reset() method to clear the values in the form input after submission.

• Line 177, 118: We used the catch keyword to handle the possibility of an error and then display the error message to the browser by making use of the alert() method.

• Line 95: The final thing we did is to call all our data in the sendMessage() function within the formSubmit() function, so the data gets posted to our Realtime Database.

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

Our database should also look like this:

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

That should solve our permission denied error.

We now have a perfectly working registration form.