How to submit a HTML form using JavaScript

When do we fill forms? Mostly it is to provide some information about something to someone, that someone here is a server and you are the client. We register to events, fill job application forms, enter log in information and all these forms take the information we (clients) provide to the server. The scripting language used on the client side is JavaScript while the scripting language on the server's side is PHP. This tutorial explains how to submit a HTML form using JavaScript on the client's side.

The whole point of the above paragraph is that the information provided in a form is to be submitted to the server. For suppose, the labels in the form are name, age, phone number and password, there might be some requirements a user must possess to even fill ht form. These requirements are to be checked when the user clicks on the submit button and then the form has to be sent to the server. For example, sometimes when we fill some forms and miss an input field, it makes the field red and asks to fill out all the empty fields.

These are two methods a form can be submitted- the simple submit() method and the validation method. All the pre-defined requirements are checked in the validation method while in the submit() method, the form can be submitted just by clicking a button without checking anything, we'll learn about both the methods:

First, let us make a scenario:

Suppose, we are making a job application form with labels:

1. Name
2. Age
3. Address
4. Country
5. Phone number
6. About you
7. Password
8. Confirm Password

Predefined Requirements:

1. Password and Confirm password must be the same
2. Age must be more than 21 and less than 55
3. Phone number must be 10- digit long
4. Limited to India
5. All the eight details are mandatory to be filled.

One way of doing this: (Using the form submit() method)

Using this method, we can check the pre-defined requirements but that makes the code a bit complicated. Hence, it is mostly used just to submit the form on clicking a button without validating any information.

Syntax:

Here, let us keep the server's part aside as PHP is a whole another language. Let us just use another HTML page or you can even use a website link. In the <form> tag, action refers to the page the form details are to be submitted to. Observe that the type of the button is kept as "submit" and then on clicking that button, a function from JS fun() is called which uses the submit() function to submit the form to the link given to the action attribute. Now, let us see the code.

Code:

Observe the colors:

Output:

Mechanism:

1. We made a form by arranging the labels and input fields in columns of a table. We made a submit button as in the syntax on clicking which the fun() function from JS is invoked
2. We styled it a little bit
3. In the fun() function, we just submitted the form.
4. We mentioned another HTML page in the action attribute and it is opened on submitting the form.
5. Observe that there are no pre-requisites checked on the client side.
6. You might wonder why can't we use the conditional statements and then submit the form. Let us try it:

Here we go:

Output:

See that even if all the requirements are not satisfied, an alert message is displayed and yet the form got submitted to the web page given to the action attribute. This is because the default behavior of submit() is to just submit the form without validation.

So, is there no way we can use submit() to validate? Sure, there is. We need to stop the default behavior of submit() before using it:

In line number 3 of the function, we need to use the line:

Output:

Even though it worked, observe the nested if-else statements. Well, we can use different functions for different pre-requisites and call them one after the other but it still will be complicated.

Now, let us go to the second method:

Validation before submission

1. We create the form just like in the above method.
2. In the <form> tag, we have an attribute called onsubmit.
3. We need not add an onclick event to the button.
4. In the function fun(), we need to set return values as true or false based on the requirements.
5. Only if all the requirements are matched, we return true.
6. Now, we set return fun() to onsubmit in <form>
7. Only if fun() returns true, the form gets submitted and the values are sent to the link in the action attribute.

Code:

Observe the colors:

• Also, see that the return statements are highlighted. Only if:
  1. Password is the same as confirm password
  2. Age > 21 and Age < 55
  3. Phone number is 10 digits long
  4. Country is India
  5. All the fields are filled
  The form gets submitted.
• Even if one requirement fails, an alert message is displayed.

Output: