Skip to main content

How to Save Form Data in Mongodb Database using Node.js

  In this tutorial we will learn how to save data from the Form in Mongodb database using a Node.js app. We will create a simple form in html in front end and use node.js as backend server to post or save the data into mangoose database. In the previous blog post, we just learned how to submit the form data using javascript, but in this blog we will learn a little advanced concept of saving the form data into a database. To learn about how to save data from a form in Mongodb database using node.js, you need to have some basic understanding of node.js, mongoose, and html. 1. Creating a Node.js app Open the command terminal on your computer and type below commands in it. mkdir sample-app cd sample-app npm init -y   2. Install Dependencies In order to successfully run our application, we need to install some dependencies as mentioned below: Mongoose: Mongoose is a Object Data Modelling library for node.js. It helps in object mapping, creating collections, saving and retrievi

How to Submit a Form Using Javascript

While browsing the Internet, the most common thing that you find is submitting a form. We fill up forms for entering personal information, shipping details and host of other things. But ever wondered what complex operations goes behind to carry out a simple operation of filling and submitting a form.

In today’s tutorial we will learn about how to create a form and submit a form using JavaScript. We will only cover creating and submitting a form using JavaScript but we will not cover how to save the information into database. We can cover it in our next blog!

Creating an HTML Form

For the sake of this blog, we will create a form where we will take in name, username and password and place a button to submit the information. Here is the code below:

But while dealing with forms, you need to ensure that to gather the data provided in the form, you need to use attributes like id, name, or class in the <input> field and in the <form> field itself.

You can easily capture the data provided in the input field using various methods like getElementByID(‘id’); getElementByClass () and getElementByName().

We use getElementByClass () method when we use ‘class ‘ attribute in input tag. Similarly, getElementByName() method is used when we use ‘name’ attribute in input tag. But here for this example we will use getElementByID(‘id’).

Using Javascript to Submit a Form

Now we have used one of the attribute from id, class, or name for individual input tags. But we need to also use one of these attributes for the login form which can be used to gather all the information provided through the form.

We will use the attribute ‘id’ for the form and we will put id=”loginForm” in the "form" tag. You can also use other attributes like ‘action’ and “method” but these are mostly used when we have to submit the form data on server side. We will learn more about these in our later blogs. 

Our final code for the form will be like as shown below.


Now, you can gather all the information from the form by utilizing the attribute id=”loginForm” which you have attached to the form and store it in some variable.


Now, that you got the form data in loginForm variable, you can attach an addEventListener() to this variable and listen to the Submit event. You can also attach an callback function which triggers when the form is submitted.


With this form data, you can perform number of operations like validations and other kind of manipulations. We will first check whether the name, username and password fields are empty before moving ahead with performing various operations.

But to do that, we need to get the values of these three fields from the form data and assign them to some variables. We will pick the values using getElementById() method and then compare them with with a blank space (“”) using .value property. If any of the field is empty, we will show an error message. You can go through the entire code as shown below.


If the values of these three variables are not empty, then in the 'else' block of If Else statement, we will print the values of these variables by putting them in ${} syntax in backticks.

We will go through the advanced form submitting operations like connecting with database, using node.js server to handle form requests in subsequent blogs.

Till then Happy Coding!

Comments

Popular posts from this blog

API Documentation Overview

 In this blog, we will explore an example of API documentation for one example function findNeedles(). findNeedles() Overview The purpose of the findNeedles() API takes two string parameters i.e. needles array and haystack and finds the total number of occurrences of each element in the needles array that are present in the haystack string. This function searches for only five words or less from the needles array and logs an error if more words are available in the needles array. The comparison is done by first splitting the haystack string using literals like backspace, tab space, single quote, and double quote etc into single elements and then looping over the needles array to find occurrences of these elements. Parameters This function takes following parameters: Name Type Description haystack String A string of any length needles String Array An array of words     Sample Code

Understanding Intents in Dialogflow

Dialogflow is a highly robust and dynamic natural language understanding platform that allows you to quickly build highly scalable conversational chatbots by leveraging the power of Artificial Intelligence (AI). You can easily create highly customizable chatbots for variety of channels like web applications, mobile applications, Facebook page, social media apps and much more. It provides seamless integration with variety of channels like Facebook, Viber, Telegram, Slack and much more. But in order to start working on building a chatbot yourself, lets connect the dots to get a clear picture of entire chatbot development process in Dialogflow. To create a chatbot, let us understand some of the nuances of the Dialogflow. What are Intents? Intents help Dialogflow ascertain the real intent or motive of the user messages. You can provide a set of certain training phrases that can help Dialogflow get trained to recognize similar such phrases and trigger a specific intent whenever such

Using Entities in Dialogflow to Extract Vital Information

Having learned about Intents in our previous blog , in this blog we will shed light on another interesting topic of Entities in Dialogflow . Entities provide an efficient way to capture and extract crucial information like name, country, location and any custom information from user inputs. Entities can be mainly categorized into three types: 1.  System Entities : These are build-in entities provided by Dialogflow through which you can identify and extract most common type of data like name, country, date, email address etc. 2. Custom Entities : These are user-defined entities that are useful to extract custom data from the user inputs. For example, you can define a Fruit entity type that can identify and map different fruit types like Mango, Apple etc.        3.  Session Entities : As the name suggests, these entities remain active only for the session for which they have been created. They provide additional capability through which we can update custom entity types with new