Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to submit an HTML form using JavaScript?
In this tutorial, we will learn how we can submit an HTML form using JavaScript. To submit an HTML form using JavaScript, we are calling validate() to validate data when the onsubmit event is occurring.
We will discuss the direct method of submitting the HTML form as well as the method which checks that none of the fields is empty. Both of these methods are listed below −
Using the Form submit() Method
Using the manual validations
Let us discuss both of these methods in detail in code examples associated to each.
Using the Form submit() Method
The submit() method simply submits the form just by clicking the submit button associated with the form. The submit method neither takes any parameter nor returns any value it just submits the form.
NOTE − We can use the Form reset() method to reset the form again with all the empty fields.
Syntax
The following syntax will be used to submit the form using the Form submit() method −
var selectedForm=document.getElementById("id");
selectedForm.submit();
In above syntax, we first grab the form element we want to submit by its id and then use the submit() method to submit the form.
Let us understand the practical implementation of the submit method with help of a code example −
Algorithm
Step 1 − In the first step, we will define the form tag with some required input fields and a submit button.
Step 2 − In this step, we will define a callback function for the onclick event used inside the submit button that calls the function by clicking the button to submit the form.
Step 3 − In the last step, we will write the body of the callback function declared in previous step and use the submit() method on the form.
Example
The example below will illustrate the use of submit() method to submit the HTML form −
<!DOCTYPE html>
<html>
<body>
<h2>How to submit an HTML form using JavaScript?</h2>
<p id="result"></p>
<form id="myForm">
<label>Username:</label>
<input type="text" id="inp1" name="username"><br>
<label>Password: </label>
<input type="password" id="inp2" name="password"><br><br>
<button type="submit" onclick="submitForm(event)">Submit</button>
</form>
<script>
var myForm = document.getElementById("myForm");
var result = document.getElementById("result");
function submitForm(event) {
event.preventDefault();
myForm.submit();
result.innerHTML = "<b>The button is pressed and form is submitted.</b>"
}
</script>
</body>
</html>
In the above example, we are using the event.preventDefault() method to prevent the form from refreshing, but still, the form is refreshing on click to the submit button which means the form is submitting on every click and it is getting refreshed every time.
Using the validations Method
We can use the validation method to submit the form. In this method, first we manually assign conditions in the function to check whether all the input fields in the form are filled or not. If any of these input field is empty it will return the error message and focus the field that is empty due to which the error occurs. Otherwise, it will return true to the onsubmit event in the form that means the form should be submitted.
Let us understand this method of submitting form practically with help of code example −
Algorithm
Step 1 − In the first step, we will define a form tag inside the HTML document which we are going to submit later.
Step 2 − In the next step, we will give all the necessary and the required input fields to the form tag.
Step 3 − In this step, we will define a JavaScript callback function that returns the Boolean value and assign it as a value to the onsubmit event of the form.
Step 4 − In the last step, we will write the body of the JavaScript function that validates the form and submit it only if it passes all the validations. Otherwise, it will show an error.
Example
The below example will explain the validations and the validations method to submit the form −
<!DOCTYPE html>
<html>
<body>
<form action="/cgi-bin/test.cgi" name="myForm" onsubmit="return(validate());">
<table cellspacing="2" cellpadding="2" border="1">
<tr>
<td align="right">Name</td>
<td><input type="text" name="Name" /></td>
</tr>
<tr>
<td align="right">EMail</td>
<td><input type="email" name="EMail" /></td>
</tr>
<tr>
<td align="right">Zip Code</td>
<td><input type="text" name="Zip" /></td>
</tr>
<tr>
<td align="right">Country</td>
<td>
<select name="Country">
<option value="-1" selected>[choose yours]</option>
<option value="1">Canada</option>
<option value="2">Sri Lanka</option>
<option value="3">Mexico</option>
</select>
</td>
</tr>
<tr>
<td align="right"></td>
<td><input type="submit" value="Submit" /></td>
</tr>
</table>
</form>
<script>
function validate() {
if (document.myForm.Name.value == "") {
alert("Please provide your name!");
document.myForm.Name.focus();
return false;
}
if (document.myForm.EMail.value == "") {
alert("Please provide your Email!");
document.myForm.EMail.focus();
return false;
}
if (document.myForm.Zip.value == "" ||
isNaN(document.myForm.Zip.value) ||
document.myForm.Zip.value.length != 5) {
alert("Please provide a zip in the format #####.");
document.myForm.Zip.focus();
return false;
}
if (document.myForm.Country.value == "-1") {
alert("Please provide your country!");
return false;
}
return (true);
}
</script>
</body>
</html>
In the above example, we have used the validations to validate all the input fields in the form. If any of the input field is not following the instructions to fill it in the particular way or it is empty no text is written inside it, then there will be a prompt box appear on the screen with the error and after correcting the error if you click the submit button it will send true to the onsubmit event and the form will be submitted.
In this tutorial, we have discussed about the two methods of submitting the HTML form. You can use any of these methods to validate or submit the form.
15K+ Views
